Основы языка HTML
advertisement
Основы языка гипертекстовой разметки документов HTML Перед вами определения важнейших понятий HTML( файл) документ, созданный на основе языка HTML Web-страничка – документ, основа которого HTML файл Web -сайт – это место в сети Интернет, где хранятся набор Web-страниц, принадлежащих одному владельцу. Интернет –это сеть, объединяющая компьютерные сети, опоясывающая весь мир Web-браузер –это программа, которая общается с Web - сервером, передает ему запросы, получает HTML документы и показывает их пользователю. 2 ЯЗЫК HTML – это универсальный язык, который понимают все компьютеры во всем мире (HYPER TEXT Markup Language), это язык гипертекста, который используется для создания любого сайта. Был разработан Тимом Бернес Ли(1990г.), и благодаря росту Мировой паутины, набрал популярность. HTML – файл представляет собой простой текстовый файл, имеющий расширение HTML. 3 Для создания Web-сайта разработано много программMS FrontPage, Macromedia Dreamweawer и др. Процесс создания и редактирования страницы очень нагляден, т.к.производится в режиме WYSIWYG («What You See Is What You Get» «Что видишь, то и получаешь». Но для создания простейшей Web-странички можно воспользоваться текстовым редактором «Блокнот». В основе HTML-файла лежат теги. Теги определяют структуру Webстраницы 4 Тег (Tag)– инструкция браузеру, указывающая способ отображения текста. Теги несут ключевую информацию о том, как форматировать текст, где помещать картинки, где делать перенос и т.д. HTMLфайл = Теги (команды) + текст Для того, что бы отличать теги от текста, их заключают в угловые скобки < >. Каждый тег имеет свое имя. 5 Теги бывают двойные и одиночные Двойной тег состоит из открывающего (который говорит, что с этого места тег начинает действовать) и закрывающего (который говорит, что в этом месте действие тега заканчивается). ТЕГ Двойной (парный) <HTML>… </HTML> Одинарный тег просто говорит о том, что в этом месте надо что – то сделать, например перейти на новую строку или поместить рисунок. ТЕГ Одиночный <BR> 6 Главные теги <HTML> <HEAD> <TITLE> <TITLE> </HEAD> <BODY> </BODY> </HTML> Заголовок заключается Внутри тегов <HTML> Теги Всегда <BODY>, начинайте </BODY> с тегав парные теги <TITLE>, распологается параВтегов <HTML> тело странички. и заканчивайте них </TITLE> и появляется <HEAD>, </HEAD> </HTML>. располагается Это важная все,для чтов строке браузера включения информации должно паразаголовка сообщает быть отображено Web- о заголовке вашей браузеру на странице о том, экрана что он страницы видитбраузера: HTML-страничку. слова, изображения и т.д. 7 Структура или «скелет» WEB-странички <HTML> <HEAD> <TITLE> Мой класс </TITLE> <BODY> В стадии разработки </HTML> </HEAD> </BODY> 8 9 Теги форматирования <H1> …</H1> <H6> … </H6> Теги заголовка. Они задают уровень заголовка и гарнитуру шрифта (размер текста: Н1 - самый большой, Н6 - самый маленький) Теги <P>, </P> определяют деление на абзацы. Закрывающийся тег </P> необязателен Параметр тегов ALIGN выравнивает текст: LEFT – по левому краю RIGHT – по правому краю CENTER – по центру 10 Теги форматирования <H1 ALIGN=“center”> Моя первая WEB-страница </H1> Располагает заголовок по центру <P ALIGN=“left”> Создана 1 апреля 2005 года </P> Располагает абзац по левому краю Мой первый WEB - сайт Моя первая WEB –страничка Создана 1 апреля 2005 года 11 Теги форматирования <B> … </B> - жирный <I> … </I>- курсив <U> … </U>- подчеркивание <FONT> … <FONT> - форматирование текста color = цвет текста <BR> - разрыв строки 12 Воспользуемся Блокнотом для создания WEB-странички Запуск БЛОКНОТА ПУСК-Программы-Стандартные- Блокнот 13 Создайте HTML-файл <HTML> <HEAD> <TITLE>Мой класс </TITLE> </HEAD> <BODY> Мой класс был очень шумным и веселым </BODY> </HTML> 14 Работа с блокнотом Сохраните HTML-файл Выберите место для сохранения Задайте имя файла и расширение HTML 15 Гиперссылки на Webстраницах 16 Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Webстраницу, указанную в адресной части ссылки. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки – это текст или рисунок, выделенный синим цветом и подчеркиванием. Адресная часть гиперссылки представляет собой URL – адрес документа, на который указывает ссылка. 17 При размещении текста на Web – страницах используют различные варианты списков: Нумерованные списки; Маркированные списки; Списки определений Возможно создание вложенных списков, причем вкладываемый список может по типу отличаться от основного. 18 На страницах сайта располагают формы для отправления сведений администратору сайта. Формы включают в себя управляющие элементы различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и так далее. 19 Тестирование и публикация Web-сайтов 20 Перед опубликованием сайта в Интернете надо: 1) Просмотреть страницы сайта в различных браузерах; 2) Проверить: Нормально ли читается текст на выбранном фоне; Правильно ли расположены рисунки; Правильно ли работают гиперссылки 21 Для публикации Web – сайта необходимо получить от провайдера следующие сведения: URL – сайта Секретное имя пользователя и пароль, которые необходимы администратору сайта для его редактирования. Варианты технологии публикации Web- сайтов: Использование инструментального средства; С помощью оригинального Диспетчера файлов; Используя возможности FTP - клиентов 22 Золотые правила оформления сайта: Меню может быть выделено, и бросаться в глаза даже в ущерб читабельности. Его не надо рассматривать - оно должно быть заметным. • • Информация должна быть представлена так, чтобы ее удобно было долго читать. Это значит: небольшая ширина колонки (чтобы не бегать глазами по горизонтали), текст с засечками (serifs, более пригоден для долгого чтения), темным по светлому (так не утомляются глаза). • На одной странице должен быть размещен только один связанный блок текста. Если надо перейти к блоку с другим содержанием сделайте ссылку. • Ссылки должны однозначно определять то место, куда они указывают! Если это заголовок статьи - сделайте рядом описание. Если это переход к целому разделу - опишите все пункты раздела. • Не надо давать пользователю выбор! В смысле, в одно и то же время давать возможность выбора. Опишите одну альтернативу, со ссылкой. Затем другую со ссылкой. Если первая пользователю подойдет, он не будет думать о второй. • Не злоупотреблять динамическими объектами. 23 Дизайн сайта- это художественное и функциональное оформление сайта, предполагающее единство содержательных и навигационных элементов, выбранных исходя из интересов пользователей. Основные требования: • правильная компоновка информации на странице; • удобство и наглядность представления элементов управления и кнопок навигации; • соответствие определенному стилю и самобытность; • быстрая загрузка страницы; • комфортное сочетание цветовой гаммы; • учет интересов целевой аудитории. 24 Чего стоит избегать при создании страницы: • Не стоит использовать часто используемые слова и фразы при поиске, поисковая система отслеживает соответствие содержания страницы ключевым словам; • Не стоит превышать заданные лимиты в тэгах title, description, key words; • Не стоит использовать заглавные буквы в заголовках и тексте; • Не стоит использовать фреймы, поисковые системы с ними не справляются. 25 В качестве основных ошибок при создании Web-страниц можно отметить: • неудачное цветовое решение; • неработающие ссылки; • слабое информационное наполнение; • плохая навигация, неудобное перемещение по сайту; • неработающие разделы; • отсутствие контактной информации; • только контактная информация. 26 Тогда в качестве необходимой информации на сайте должна присутствовать: Контактная информация о создателях сайта и «хозяев» сайта. Исчерпывающая информация о тех сведениях, которые имеются на сайте. Внешние и внутренние ссылки, с перекрестными ссылками между информационными объектами. Возможность перелистывания страниц. Возможность интерактивного перемещения по тексту (в случае если объем велик). Возможность коммуникативного общения. Баннеры, логотип. Карта сайта. 27
