Всемирная паутина состоит из множества связанных между собой электронных документов, представляющих информационные данные, описанные с помощью специальных технологических правил. Эти правила составляют на языке гипертекстовой разметки HTML (Hyper Text Markup Language).
Многие называют HTML языком программирования, это не совсем верно, HTML является языком разметки электронных документов.
Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называют браузерами. Основная функция браузера заключается в интерпретации кода HTML и выходе визуального результата на экран монитора пользователя. Существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются 3 программы: Internet Explorer, Netscape Navigator и Opera.
Слово «гипертекстовый» в расшифровке названия языка HTML нуждается в отдельном пояснении.
Гипертекст представляет собой «многомерный» текстовый документ или объединение нескольких текстовых документов, содержащий гипертекстовые ссылки, построенный по принципу «нелинейного» структурированного материала за счёт применения гипертекстовых ссылок, позволяющих одним щелчком мыши перемещаться из одной «смысловой точки» гипертекстового документа в другую. Концепция гипертекста, лежащая в основе WWW, была предложена Теодором Хольмом Нельсоном в 60-х гг. XX века. Дальнейшим развитием гипертекста стала технология гипермедиа, позволяющая связывать гиперссылками не только текстовые фрагменты, но и данные иного типа (графику, звукозаписи, цифровое видео и пр.), когда щелчок мышью на выделенном слове или фразе приводит к демонстрации заданной разработчиком гипермедиа-документа иллюстрации, воспроизведению аудиозаписи, записку исполняемо й программы и пр. либо, например, те или иные участки изображения представляют собой ссылки на текстовые фрагменты или иные файлы данных.
При создании HTML документа акцент делается не на оформлении текста документа (как в текстовых редакторах) а на его структуре. Такой принцип позволяет создавать системно-независимые файлы, то есть такой файл можно просматривать на компьютере любой системы., используя программы-браузеры разных производителей. Прежде чем приступить к разработке своего сайта, определимся с програмным обеспечением, которое будем использовать. Свою web-страничку или даже весь сайт можно создовать вручную, используя HTML. HTML код может быть записан в обычном текстовом редакторе (блокнот) или в специальном редакторе. Но при таком способе легко допустить ошибку, да и времени придется затратить немало.
Все ПО для создания сайтов можно распределить на группы:
· Конструкторы сайтов;
· Система управления сайтом;
· Программы для создания сайтов.
Конструкторы сайтов позволяют очень быстро создавать web ресурсы, не требуют специальных знаний.
При этом на конечный продукт накладывают жесткие ограничения:
1. Дизайн выбирается из ограниченного количества шаблонов
2. Функциональные возможности web страницы ограничены
3. Система управление таким проектом привязана к хостингу, то есть забрать свой проект вы не сможете.
Основные функции CMS система управления сайтом:
1. Представление средств разработки сайта
2. Организация совместной работы над сайтом
3. Управление содержимым (контроль доступа, хранение документов, и т.д.)
4. Представление информации в удобном для поиска и навигации виде.
Каждый сайт, созданный в CMS, имеет панель управления. Она является лишь частью программы, но ее достаточно для управления сайтом.
Система создания и управления сайтом могут быть платными (как 1С-Битрикс, WebDirector) и бесплатными (как Joomla).
Для непрофессионалов удобнее всего воспользоваться WISIWYG редактором (что видишь, то и получаешь) Работа с такой программой очень похожа на создание документа в Microsoft Word.
HTML - документы представляют собой текстовые файлы, в которые встроены специальные команды.
Теги (tags) – команды языка HTML. Для файлов, являющихся HTML-документами, принято расширение htm или html.
Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне обозревателя, выбирая соответствующую команду или кнопку на панели инструментов, или клавишу <F5>.
Например чтобы в окне браузера увидеть текст « Привет! Это моя первая web-страничка »
при подготовке документа параметры формирования описать можно так:
<выделить полужирным> « Привет! <закончить выделение>Это моя первая web-страничка»
В HTML документе этот фрагмент пишется так:
<b> Привет! b> Это моя первая web-страничка
<HEAD>
<TITLE>
Название Web-страницы
TITLE>
HEAD>
Привет! Это моя первая web-страничка
Практическая работа
Задание № 1.
1. Создать личную папку, куда вы будете сохранять все файлы своего сайта.
2. Открыть окно текстового редактора Блокнот.
3. Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Html-код страницы помещается внутри контейнера <HTML>HTML>.
Заголовок Web – страницы заключается в контейнер <HEAD>HEAD>
Название Web-страницы содержится в контейнере <TITLE>TITLE>
Наша страница будет называться «Компьютер»:
Компьютер
HEAD>
Основное содержание страницы помещается в контейнер <BODY>BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и т.д.
Поместим на страницу текст «Все о компьютере»
<BODY>
Все о компьютере
BODY>
Созданную Web-страницу необходимо сохранить в виде файла. Титульный файл сайта принято сохранять под именем index.htm
Загрузите полученный файл в окно браузера для просмотра.
Компьютер
HEAD>
<BODY>
Все о компьютере
BODY>
HTML>
4. Для форматирования текста:
· размер шрифта задается тэгами от <H1> (самый мелкий) до <H6> (самый крупный).
· Положение заголовка на странице позволяет задать атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру – ALIGN=”center”
· С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE =”Arial”), атрибут SIZE – размер шрифта(например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=”blue”).
· Заголовок целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.
· Разделение текста на абзацы производится с помощью контейнера <P>P>
· Разместим на титульной странице текст, разбитый на абзацы с различным выравниванием:
<P ALIGN =”left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. P>
<P ALIGN = “right”> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
P>
Т.о. сейчас в контейнере <BODY> находится следующая последовательность тэгов:
< FONT COLOR =”blue”>
Все о компьютере
FONT>
<HR>
<P ALIGN =”left”> На этом сайте вы сможете…
P>
<P ALIGN = “right”> Терминологический словарь…
P>
5. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.
6. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.
На экране вы увидите результат работы.