Конспект лекций дизайн интернет-страниц план-конспект занятия (информатика и икт) на тему

Вы уже заметили, что многие фирмы, дающие рекламу на телевидении и в газетах, сообщают свой адрес в World Wide Wed (WWW). Никто, от гигантских корпораций до мелких компаний, не избежал увлечения Web- страницами. То есть информация размещается на сетевых страницах (Web- страницах) и отображается при выводе на компьютер в виде текста, графики, видеоклипов и звука. Например, многие киностудии создают Web-страницы для рекламы последних фильмов, размещая на них видеоролики продолжительностью до одной минуты. До появления WWW подобный предварительный показ был возможен лишь в зале кинотеатра или с помощью телевизионной рекламы.

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

Перемещение по страницам осуществляется очень просто: надо указать курсором на фразы или рисунки, связанные с нужной страницей, и щелкнуть кнопкой мыши.

Уже сейчас, работая с нашей обучающей Web-страницей, вы пользуетесь возможностями гипертекста. Например, чтобы открыть эту страницу вам пришлось щелкнуть мышью по тексту – ссылки: Что такое World Wide Wed?Как работает Web? Web в прошлом и будущем.

Приведем некоторые термины, которые вам будут встречаться далее.

WWW- общеизвестная аббревиатура World Wide Web.

Web - еще одно название World Wide Web.

Internet - совокупность нескольких тысяч компьютерных сетей, расположенных по всему миру и объединенных в единую сеть.

Домашняя страница (Home Page) - этот термин также используется коммерческими информационными системами в качестве названия их вводных страниц.

Web-страница (Web Page) - название страницы, которая появляется на экране монитора при запросе информации.

Web-броузером - программное обеспечение, необходимое для вывода на экран Web- страницы. Наиболее популярными являются: Netscape Communicator компании Netscape, Internet Explorer фирмы Microsoft.

Провайдер (Service Provider)- фирма, которая обеспечивает доступ к Internet.

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

URL - унифицированный указатель ресурсов (Uniform Resource Locator), используется для указания адреса страницы в WWW.

Сайт (site) - набор Web-страниц, принадлежащих одному владельцу.

Протокол НТТР - Web использует собственный способ связи- протокол НТТР, с помощью которого страницы отправляются и принимаются в Интернете. НТТР (Hyper Text Transfer Protocol)- это протокол. Любой протокол - это набор правил, которые используются компьютерами для обмена информацией. НТТР – самый популярный на сегодня, но не единственный протокол, поддерживаемый WWW.

2. Как работает Web?

Web использует технологию «клиент/сервер». Это означает, что где-то существует компьютер, на котором работает программное обеспечение Web-сервера. Различные пользователи (такие, как и вы и я) являются клиентами, работающими с Web-броузерами, которые получают информацию с Web-сервера.

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

В настоящее время существуют около 150 000 Web-серверов, постоянно общающихся между собой.

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

3. Web в прошлом и будущем

Web появилась в начале 1989 года. Её концепцию разработала группа ученых из лаборатории CERN (The European Laboratory for Particle Physics) В Швейцарии. Они закончили работу в 1991 году. После годичной проверки был выпущен Mosaic, первый и необыкновенно популярный Web-броузер, получивший восторженные отзывы. Он был легок в использование, работал на платформах UNIX,PC и Macintosh и Graphich. Совместно они разработали Netscape – ведущий броузер на сегодняшний день. Приблизительно 80% в Web приходится на тех, кто использует Netscape. Позднее на рынке появился новый броузер, Internet Explorer, выпущенный фирмой Microsoft. Он также быстро принят Интернет – сообществом.

В какой-то степени популярность WWW подобна головокружительному успеху Microsoft Windows. До Windows использовалась текстовая операционная система DOS, требовавшая определенной подготовки. Появление Windows все изменило. Windows позволяет делать практически все, что делал DOS, но теперь уже посредством удобного графического интерфейса. Чтобы скопировать файлы, больше не требуется вспомнить нужную команду – вы просто перетаскиваете файл из одного окна в другое. Точно так же графическая сущность WWW привлекла всеобщее внимание к Интернету и электронным средствам связи. До появления WWW для работы с интерном требовалось знание массы команд. Теперь же Вы можете путешествовать по всему миру, переписывать файлы и знакомиться с информацией с помощью нескольких щелчков мыши.

Теперь, когда Вы знаете историю Web, поговорим о её будущем. Возможно, самым заметным и быстрым будет развитие HTML, легкого в использовании языка, управляющего внешним видом информации на броузерах в ваших компьютерах. В течение нескольких последних лет HTML претерпел несколько перевоплощений. Недавно появилась его версия 3.2, которая была одобрена и рекомендована Web-консорциумом, международной организацией по стандартизации, контролирующей стандарты Web. Скоро появятся на рынке новые расширения HTML, позволяющие проще интегрировать мультимедийные файлы, например аудио- и видеоклипы, и дающие большую гибкость в компоновке страницы. Мы же с Вами рассмотрим лишь основы HTML.

Сейчас начинается использоваться новое расширение HTML. Это использование таблицы каскадных стилей (cascading style sheets-CSS). CSS позволяет управлять определенными атрибутами шрифта текста на вашей Web-странице и сделать представление информации значительно более разнообразным.

На сцену WWW выходит также язык URML (Virtual Reality Modeling Language). URML позволяет создавать в Web интерактивные трехмерные миры, по которым посетители могут путешествовать почти в буквальном смысле. Эти трехмерные миры появились пару лет назад, и сейчас, когда появились стандарты и более простые средства, URML все чаще применяется на страницах всего мира.

Что такое WWW?
Что такое Интернет?
Что называют Web-броузером?
Что называют Web-страницей?
Какую технологию передачи информации использует Web?

Основы языка HTML

Понятия языка разметки
История развития HTML
Типы HTML-редакторов
Редакторы тегов
Структура -документа
Информация о языке и версии HTML

1. Понятия языка разметки

HTML-документ представляет собой обычный текстовый файл в формате ANSI ASCII, содержащий собственно текст и специальные теги для его разметки, а также ссылки на другие документы, графические изображения и любые иные файлы. Теги задаются в файле и обрабатываются браузером в соответствии с правилами специального языка HTML (Hyper Text Markup Language – Язык Разметки Гипертекста).

HTML не является языком программирования.

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

Гипертекст это текст, в котором имеются ссылки для автоматического перехода на другие тексты – гиперссылки .

Тег (от англ., tag – ярлык, метка) – элемент языка HTML, используемый для разметки Web-страниц.

Элементы разметки состоят из заключённых в угловые скобки ( и > ) дескрипторов – тэгов (tags) и их атрибутов . Совокупность открывающего ( ) и закрывающего ( ) дескрипторов - есть контейнер . Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html .

Язык HTML был разработан Тимом Бернерс-Ли. В 1990-х годах HTML получил широкое признание благодаря быстрому росту Web.

2. История развития HTML

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

HTML 2.0 (ноябрь 1995) – был разработан под эгидой Internet для упорядочения общепринятых положений.

HTML+ (1993) и HTML 3.0 (1995) – это более широкие версии языка HTML. Несмотря на то, что в обычных дискуссиях по стандарту согласие между разработчиками браузеров не было достигнуто, эти версии содержат ряд новых общих свойств.

HTML 3.2 (январь 1997) создан усилиями Рабочей группы World Wide Web Consortium по HTML для упорядочения ряда общепринятых положений и изменений предыдущих версий.

4.0 (с 1999 г.) – вводятся механизмы таблиц стилей, скриптов, кадров, внедрения объектов, улучшенная поддержка разных направлений письма и направления справа налево, таблицы с большим количеством возможностей и новые свойства форм.

3. Типы HTML-редакторов

Для создания любого файла нужна какая-нибудь программа.

HTML-редакторы подразделяются на два типа:

редакторы тегов (HTMLPad, LightPad, HomeSite, Visual HTML Workshop) – предполагают, что пользователь знаком с языком HTML
WYSIWYG-редакторы (Netscape Composer, Front Page Express, Front Page 2000, Microsoft Word) – часто называют редакторами типа «что видишь, то и получишь» (what you see is what you get).

Не все WYSIWYG-редакторы могут генерировать код HTML, полностью адекватный форматируемой странице. Например, MS Word теряет при преобразовании в HTML информацию о стиле линий.

4. Редакторы тегов

Подготовка сайта с помощью редакторов тегов включает в себя этапы:

Создание HTML-документа;
Оформление (изменение цвета и формата шрифта; форматирование структуры таблиц; изменение фона страниц; внедрение графических элементов; применение спецэффектов; связывание страниц сайта);
Сохранение;
Просмотр полученной Web-страницы в браузере;
Размещение сайта в сети Интернет.

Остановимся на том, из каких основных этапов состоит процесс создания документа HTML ручками , не прибегая к специализированным приложениям:

Набор содержимого в любом из текстовых редакторов (например, Блокнот ) и сохранение обычного текстового файла.
Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html (делается в Блокноте).
Организация переходов по гиперссылкам документа при помощи элемента - основного связующего элемента языка HTML .
Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, Java , скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML .

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

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

Любой -документ состоит из следующих основных частей:

Строки с информацией о версии HTML, используемой в данном документе
Блока заголовка документа
Тела документа.

… - Тег должен открывать -документ, тег завершать - документ.

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

… - Все, что находится между этими тегами, толкуется браузером как название документа.

… - Эта пара тегов указывает на начало и конец тела -документа, определяющего содержание документа.

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

Тег означает команду «начало новой строки».

6. Информация о языке и версии HTML

Начиная с версии 3.2 каждый документ должен начинаться с декларации , которая необходима для того, чтобы сообщить браузеру версию языка HTML.

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN>

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

Для чего предназначен язык HTML?
Является ли HTML языком программирования?
Какова структура HTML документа?

1. Основы оформления сайта

2. Изменение шрифта

4. Размер шрифта

6. Выравнивание текста

1. Основы оформления сайта

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

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

Использование линий позволяет разделить смысловые части страницы и оживить ее.

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

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

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

2. Изменение шрифта

Изменение шрифта текста в HTML может производиться с помощью тега … . При этом появляется возможность изменить у текста, оказавшегося внутри этого контейнера, начертание, размер и цвет шрифта.

Тег FONT изменяет размер и цвет шрифта только для текста его содержимого, а для задания базовых значений (действующих По-умолчанию) для всего документа, используется тег BASEFONT, который устанавливает заранее значения для атрибутов тегов FONT , находящихся после него.

Тег BASEFONT не имеет закрывающего тега и должен располагаться в самом начале содержимого контейнера BODY.

Для изменения типа шрифта (гарнитуры) используется атрибут FACE , значением которого является список шрифтов, приведенных через запятую в порядке уменьшения приоритета. Если в системе клиента имеется шрифт с указанным названием, то он будет использоваться при воспроизведении данного фрагмента. Если в названии шрифта имеются пробелы, то желательно взять его в кавычки.

FACE = «Courier New, Arial, Tahoma»

Если атрибут FACE не указан, браузеры будут использовать по умолчанию шрифт Times New Roman

« Courier New»> Courier New

4. Размер шрифта

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

SIZE= абсолютный размер

SIZE= относительный размер

Атрибут SIZE устанавливает размер шрифта текста, содержащегося в пределах тега FOND . Можно задать абсолютный размер шрифта, указав какое-либо целое число от 1 до 7. Для шрифта можно также указывать относительный размер (желательно в кавычках), присваивая атрибуту целое число со знаком, например, SIZE= «+1» или SIZE= «-2» . В последнем случаи реальный размер шрифта определяется суммированием указанного в атрибуте значения и текущего базового размера, заданного тегом BASEFONT.

Если в теге BASEFONT не используется атрибут SIZE, то По-умолчанию используется размер 3.

Изменение цвета текста производится с использованием атрибута COLOR. Данный атрибут указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо точным названием цвета на английском языке.

Названия основных цветов и соответствующие им коды

Black или #000000 (черный)

Red или #FF0000 (красный)

Lime или #00FF00 (салатовый)

Yellow или #FFFF00 (желтый)

Maroon или #800000 (бордовый)

Gray или #808080 (серый)

Blue или #0000FF (синий)

Aqua или #00FFFF (морская волна)

Green или #008000 (зеленый)

Navy или #000080 (темно-синий)

Silver или #C0C0C0 (серебристый)

Fuchsia или#FF00FF (фиолетовый)

Olive или #808000 (олливковый)

Teal или #008080 (темная морская волна)

Purple или #800080 (пурпурный)

White или #FFFFFF (белый)

Для получения любого другого оттенка цвета можно применить различные комбинации RGB-значений, записанные в шестнадцатеричном формате. На прилагаемом диске находится файл Таблица цветов.htm в котором приведены 216 цветов, хорошо отображающихся браузерами на мониторах в 256-цветном режиме, а так же названия этих цветов.

6. Выравнивание текста

Для выравнивания текста используется атрибут ALIGN , который может принимать значения: Center – выровнять по центру; Left – выровнять по левому краю; Right - выровнять по правому краю; Justify – выровнять по обоим краям (по ширине).

Необходимо отметить, что данный атрибут применяется не с тегом FRONT , а с тегами форматирования и группировки текста такими как:

📎📎📎📎📎📎📎📎📎📎