Информационные ресурсы Интернет-ресурсы Всю информацию, все свои знания люди постепенно переносят в интернет. Благодаря принципу открытости, на котором построен интернет, его ресурсы (от франц. ressources – запасы, источники, средства) постоянно обновляются и пополняются. Информационные ресурсы в электронном виде доступные через интернет называются интернет-ресурсами. Основные понятия Веб-страница – совокупность информации, передаваемой с помощью службы WWW и отображаемой веб-клиентом (программой броузером). Веб-сайт (англ. site) – набор из некоторого количества вэб-страниц, связанных вместе единой темой, общим оформлением и взаимными гипертекстовыми ссылками (которые обычно физически хранятся на одном компьютере – веб-узле). Представление информации в электронном виде Виды электронной информации: • текстовая; • графическая; • звуковая. Типы электронной информации: • статическая (неизменная); • динамическая (изменяющаяся с течением времени); • интерактивная (изменяющаяся при взаимодействии). Мультимедийная информация Каждый из видов информации может использоваться сам по себе, или совместно с другими. Когда информация одновременно представлена в нескольких видах, то её называют мультимедийной (от англ. multimedia – многие средства). Гипертекст В гипертексте (от англ. hypertext – больше, чем текст) делается попытка заменить линейное представление материала, как это принято в обычных книгах, нелинейным, более соответствующим процессу мышления человека. Основные принципы: • свободное перемещение по тексту; • необязательность сплошного чтения; • использование перекрестных ссылок. Идеология гипертекста подразумевает разделение «содержания» и «представления» как двух независимых аспектов информации. Представление текстовой информации Текстовые форматы позволяют представлять алфавино-цифровую информацию. Соответствие между символами текста и их числовыми кодами задается кодовой таблицей или кодировкой (англ. encoding). Основные русскоязычные (Cyrillic) кодировки: • Windows CP1251; • KOI8-R; • ISO8859-5; • DOS. Различия русскоязычных кодировок Пример текста, набранного в кодировке CP1251: Текст сохранён в кодировке windows-1251. Тот же текст при просмотре в кодировке KOI8-R: рЕЙЯР ЯНУПЮМёМ Б ЙНДХПНБЙЕ windows-1251. И в кодировке ISO8859-5: вхъёт ёюхррэИэ т ъюфшрютъх windows-1251. Размещение текстовой информации в интернет Для оформления документов, предназначенных для размещения в интернете, используется специальный язык, который называется HTML (англ. HyperText Markup Language). Документы HTML представляют собой обычные ASCCI-файлы. Для их подготовки достаточно простейшего текстового редактора (например, Notepad). Специализированные HTML-редакторы Как правило используют технологию WYSIWYG (англ. What You See Is What You Get – что видишь, то и получаешь). К их достоинствам относятся: • ускорение и упрощение процесса разработки; • автоматизация многих рутинных операций; • позволяют осуществлять быстрое макетирование; • могут использоваться начинающими. Недостатки: • не создают «чистого» кода (добавляют «фирменные» или избыточные элементы); • могут автоматически изменять открываемый документ; • полностью не избавляют от знания HTML, созданные в них документы как правило требуют ручной доводки. Некоторые современные HTML-редакторы • Macromedia Dreamweaver; • Adobe GoLive; • Microsoft FrontPage Многие современные неспециализированные программные продукты так же позволяют сохранять документы в формате HTML. Например Microsoft Word. Однако результат как правило оставляет желать лучшего. Представление графической информации В сети интернет используются следующие основные графические форматы: • GIF (Graphics Interchange Format); • JPEG (Joint Photographic Expert Group); • PNG (Portable Network Graphics). Некоторые средства подготовки графики • • • • • • • Adobe Photoshop; Adobe ImageReady; Macromedia Fireworks; Adobe Illustrator; Macromedia Freehand; Corel Draw; Xara X. Интерактивные анимации Flash – сложные мультимедийные интерактивные иллюстрации, интегрированные со звуковым сопровождением. VRML (Virtual Reality Modeling Language) – средство описания сцен в трехмерном виртуальном пространстве. Основные звуковые форматы • • • • WAV (англ. wave – волна); MIDI (Musical Instrument Digital Interface); MP3; RealAudio. Основные мультимедиа форматы • • • • AVI (Audio/Video Interleaved); MOV (англ. movie – кино); MPEG (Moving Picture Expert Group); RealMedia. Состав команды разработчиков 1. 2. 3. 4. 5. 6. 7. Писатель. Редактор. Иллюстратор. Дизайнер. Верстальщик. Веб-мастер. Программист. Организация файловой структуры сайта Правила назначения имен файлов и папок сайта • Cледует ограничиться цифрами и латинскими буквами; • Рекомендуется использовать только нижний регистр; • Имена должны быть короткими и интуитивно понятными; • Главная страница в большинстве случае обязательно должна называться index.html (index.htm). Разметка документа в формате HTML Разметка осуществляется с помощью управляющих конструкций, которые называются тегами (англ. tag – ярлык, признак). Каждый тег состоит из имени и необязательных атрибутов. Теги заключаются в угловые скобки < >. Содержимое скобок никогда не выводится в окне броузера. Контейнеры и автономные теги Большинство тегов являются контейнерами (парными тегами). У них имеется начальный (открывающий) и конечный (закрывающий) теги. <парный_тег>элемент документа</парный_тег> Непарные теги используются для размещения отдельных (автономных) элементов на странице. <непарный_тег> Атрибуты тегов Атрибуты добавляются в тег для расширения или модификации его действия. <тег атрибут1=“значение” атрибут2=“значение” атрибут3=“значение” ...> Значения: • могут быть чувствительны к регистру; • имеют ограниченную длину в 1024 символа; • должны заключаться в двойные или одинарные кавычки (за исключением случаев, когда значение состоит из одного слова или числа, только из букв (a-z), цифр (0-9), и специальных символов (точка или дефис)). Вложенные теги В теги HTML могут помещаться другие HTMLтеги для осуществления воздействия нескольких тегов на один элемент – вложение тегов. <тег1>Пример использования <тег2>вложенных</тег2> тегов.</тег1> Теги не могут перекрываться! Неверно: <тег1>Пример неверного использования <тег2>вложенных</тег1> тегов.</тег2> Информация, игнорируемая броузерами • • • • • • Разрывы строк; Множественные пробелы; Символы табуляции; Множественные пустые теги абзаца; Текст в комментариях (<!-- Комментарий -->); Нераспознаваемые теги. Рекомендации по стилю написания HTML • Следовать синтаксическим правилам действующей спецификации W3C; • Придерживаться соглашений по написанию кода, для обеспечения удобства чтения кода документа; • Избегать использования дополнительных и избыточных тегов; • Воздерживаться от использования нерекомендованных тегов; • Следить за длинной строк (рекомендуется 80 символов) для обеспечения удобства просмотра на всех платформах. Структура HTML-документа Документ в формате HTML образуют три основные части: • строка, содержащая информацию о версии HTML; • заголовочная часть (определяется тегом <head>); • тело, непосредственно включающее содержание документа (определяется тегом <body> или <frameset>). Пример простейшего HTML-документа <html> <head> <title>Простой документ</title> </head> <body text="#0000ff" bgcolor="#f0f0f0"> <h1>Пример простого документа</h1> <hr> <p>Проба пера.</p> <p><img src="pict/book.gif" width="149" height="226"></p> </body> </html> Результат отображения документа в окне броузера Задание цвета в HTML Значения цвета задаются следующим образом: #RRGGBB где RR – шестнадцатеричное значение красной компоненты цвета, GG – зеленой и BB – синей. Все цвета веб-палитры (всего 216 цветов) составлены из комбинаций следующих шестнадцатеричных значений: 00, 33, 66, 99, СС, FF Тег body alink – задает цвет активной ссылки; background – задает путь к графическому файлу, который будет использован в качестве фона; bgcolor – задает фоновый цвет документа; link – задает цвет ссылок по-умолчанию; text – задает цвет текста по-умолчанию; vlink – задает цвет посещенных ссылок; marginwidth, marginheight (только в Netscape, leftmargin, topmargin для MSIE) – задает расстояние в пикселах от левой и верхней границами окна броузера соответственно и содержанием страницы. Элементы уровня абзаца <p> – обозначает место начала и окончания абзаца. <h1>…<h6> – обозначают заголовки соответствующего уровня. <div> – обозначает место начала и окончания раздела в документе. Все могут иметь атрибут align, задающий выравнивание (значения left, right, center, justify). <pre> – обозначает место начала и окончания. <br> – добавляет переход на новую строку. Тег a Задает якорь, представляющий собой ссылку на другие ресурсы или являющийся меткой внутри документа. href – определяет адрес (URL) документа, на который делается ссылка; name – задает имя якоря; title – задает название (описание) ссылки. <a href=“link.html”>Ссылка</a> <a href=“http://www.yandex.ru”>Ссылка</a> <a name=“top”>Якорь</a> <a href=“link.html#top”>Ссылка на якорь</a> Тег img src – обязательный атрибут указывает имя графического файла; width и height – определяют соответственно ширину и высоту отображения в пикселах; align – определяет способ выравнивания изображения относительно текста; alt – задает альтернативный текст; border – задает толщину рамки (в пикселах) у изображений, содержащихся в гиперссылках; usemap – связывает навигационную карту с изображением.