Разработка образовательного сайта на тему “Основы создания Web-сайтов”

Оглавление

Введение 2

Глава 1. Современные интернет-технологии. 4

1.1 Web-дизайн и браузеры. 4

1.2. Язык разметки гипертекстовых  страниц HTML 6

1.3. Представление текста на Web-страницах 10

1.4. Представление графики на Web-страницах 11

1.5 Инструментарий для создания Web-страниц. 12

1.5.1 HTML-редакторы. 12

1.5.2 Графические редакторы. 15

Глава 2. Разработка образовательного сайта на тему “Основы создания Web-сайтов” 18

Заключение 26

Список использованной литературы. 27

 

 

Введение

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

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

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

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

Каждый из нас уже сейчас может  сделать свой вклад в развитие Internet. Для этого достаточно создать  свой Web-сайт и разместить его в Сети.

Цель исследования:  изучить основы создания Web-страниц и разработать свой Web-сайт.

Объект  исследования: процесс создания Web-сайта.

Предмет исследования: Теоретические и практические аспекты создания Web-сайтов.

Задачи  исследования:

1. рассмотреть теоретические основы создания Web-сайтов.
2. посмотреть на практике процесс создания Web-сайта.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 1. Современные интернет-технологии.

1. Web-дизайн и браузеры.

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

Opera — веб-браузер и программный пакет для работы в Интернете, выпускаемый компанией Opera Software ASA. Разработан в 1994 году группой исследователей из норвежской компании Telenor.

Браузер написан на языке программирования C++, обладает высокой скоростью работыи  совместим с основными веб-технологиями. Отличительными особенностями Opera долгое время являлись многостраничный  интерфейс (система вкладок в  окне программы) и возможность масштабирования  отображаемых документов целиком, вместе с графикой; впоследствии эти функции  появились и в других браузерах. В Opera расширены функциональные возможности  использования мыши: кроме стандартных  способов навигации предусмотрены  так называемые «жесты мышью». В  систему безопасности браузера входят: встроенная защита от фишинга; дополнительное кодирование информационного потока при работе со страницами, содержащими  запросы конфиденциальных сведений; возможность удаления HTTP-Cookies, очистки  истории посещений одним кликом мыши, а также стартовая панель «Speed Dial».

Windows Internet Explorer — серия браузеров, разрабатываемая корпорацией Microsoft с 1995 года. Входит в комплект операционных систем семейства Windows. Занимает первое место по числу пользователей.

Internet Explorer является наиболее широко используемым веб-браузером начиная с 1999 года.

Однако, в последнее время его  доля стремительно снижается, уступая  место таким браузерам, как Opera, Mozilla Firefox, Safari и др. На сегодняшний день последней стабильной версией браузера является Internet Explorer 8. Эта же версия вошла в состав операционной системы Windows 7, однако, в отличие от предыдущих версий, его можно будет полностью удалить из системы. Также были выпущены дополнительные модификации браузера для других операционных систем, такие как Mobile Internet Explorer (для Windows CE и Windows Mobile), Internet Explorer для Mac и Internet Explorer для UNIX.

Internet Explorer можно бесплатно скачать, и он будет работать даже будучи установленным на нелегальную копию Microsoft Windows, однако лицензионное соглашение разрешает устанавливать Internet Explorer только при наличии легальной лицензии на операционную систему семейства Windows.

Mozilla Firefox — свободно распространяемый браузер. Второй по популярности браузер в мире и первый среди свободного ПО.

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

Firefox выпускается для Microsoft Windows, BeOS, Mac OS X, Linux и множества других Unix-подобных операционных систем. Код браузера — свободное ПО и распространяется под тройной лицензией GPL/LGPL/MPL.

Safari — браузер. Разработан корпорацией Apple и входит в состав операционной системы Mac OS X, а также бесплатно распространяется для операционных систем семейства Microsoft Windows. Занимает третье место по числу пользователей.

1.2. Язык разметки гипертекстовых  страниц HTML

 

Язык разметки гипертекстовых страниц  (HTML – Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Инструментарий  редактирования HTML. Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту.

Теги HTML. Документ HTML содержит текст (содержимое страницы) и встроенные теги – инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок – head и тело – body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они  находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя  тега, как правило, представляет собой  аббревиатуру его функции, что облегчает  его запоминание. Атрибуты являются свойствами, которые расширяют или  уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны  к регистру. Тег <BODY BGCOLOR=white> будет  работать так же, как <body bgcolor=white>. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

The weather is <I>gorgeous</I>today.

Результат: The weather is gorgeous today.

Конечный тег имеет то же имя, что и начальный, но перед ним  стоит слэш (/). Его можно рассматривать  как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

В некоторых случаях конечный тег  не обязателен, и браузер определяет конец тега из контекста. Чаще всего  опускают конечный тег <р> (абзац). Браузеры раньше поддерживали этот тег без  соответствующего завершения, поэтому  многие авторы Web привыкли использовать краткую форму. Это разрешено  не всем тегам, и не все браузеры прощают их отсутствие. Поэтому, если есть сомнения, включите в текст  закрывающий тег. Это особенно важно, когда в документе вы используете  каскадные таблицы стилей.

Автономные  теги. Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>, он просто помещает графику в поток страницы. Другие автономные теги – это разрыв строки (<br>), горизонтальная линия (<hr>) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как <meta> и <base>.

Атрибуты. Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

– если значение представляет собой  одно слово или число и состоит  только из букв (a-z), цифр (0-9) и специальных  символов (точка <.> или дефис <->), то можно поместить его после  знака равенства без кавычек;

– если значение содержит несколько  слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда  его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при  задании значений цветов с использованием формата "#rrggbb".

Если вы не уверены, стоит ли использовать кавычки, используйте их всегда для  всех значений.

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

The Weather is <B><I>gorgeous</I></B> today.

Результат: The weather is gorgeous today.

Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров  отображают содержимое, отмеченное таким  образом, многие не разрешают нарушать правило, поэтому важно размешать  теги правильно. Следующий пример показывает неверное вложение тегов (заметьте, что  тег <В> закрывается перед закрытием <I>):

The weather is <B><I>gorgeous</B></I>today – данная информация, игнорируемая  браузерами.

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

– разрывы строк. Символы конца  строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег <р> или <br>. Разрывы строк выводятся, если текст обозначен как текст  с заданным форматом (<рrе>);

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

– множественные <р>-теги. Последовательность тегов <р>, не прерываемых текстом, всеми браузерами интерпретируется как избыточная. Содержимое будет  выводиться так, как если бы был только один тег <р>. Большинство браузеров  выведет несколько тегов <Br> в  виде нескольких переходов на новую  строку;

– нераспознаваемые теги. Если браузер  не понимает тег или тот был  неверно задан, то браузер его  просто игнорирует. В зависимости  от тега и браузера это может привести к различным результатам. Либо браузер  ничего не выведет, или он может отобразить содержимое тега как обычный текст;

– текст в комментариях. Браузеры не выводят текст между специальными элементами  <!  и  ->, которые  используются для обозначения комментариев. После символов начала комментария  и перед символами окончания  обязательно должен находиться пробел. В сам комментарий можно помещать практически все. Комментарии нельзя вкладывать.