Введение
Работа в Internet у многих ассоциируется с WWW-серверами, суть которых в предельно краткой форме можно описать следующим образом.
На экране отображена некоторая информация - текст, картинки, иногда - с элементами мультипликации. Может присутствовать и звуковое сопровождение. Отдельные места экрана выделены, например, голубым цветом и подчеркиванием. Если в такие выделенные места подвести курсор (он при этом меняет форму, превращаясь, скажем, в указующий перст) и нажать кнопку мыши, на экране появится новая информация. Она обычно также содержит выделения, ссылающиеся на новые порции информации, и т.д. В результате простым нажатием кнопки мыши удается путешествовать по всему миру.
Для тех, кто в Internet не работал, не собирается, а если и работает, то не имеет ни малейшего намерения делать собственный сервер (и даже не знает, что это такое), рассмотрим пример, не имеющий отношения к сетям.
Нужно подготовить доклад, иллюстрируемый текстами, графиками, рисунками и т.п. на экране компьютера. Программировать Вы не умеете или не имеете времени на это. Ну что же, выходом является язык HTML.
Пусть, например, иллюстративный материал доклада имеет такой вид:
Страница 1 - начало. При последовательном изложении с нее надо перейти на страницу 2, далее - на страницу 3, и, наконец, на страницу 4. Однако может потребоваться с первой страницы сразу попасть на третью или четвертую. И хорошо, если бы было возможно возвращаться обратно на предыдущую страницу, перепрыгивать со второй страницы сразу на четвертую и т.д.
Язык HTML дает все эти возможности. И огромное количество других.
Ну а если доклад делать не надо? Нужна презентация материала, электронный учебник, книга, справочник... Да мало ли что еще можно сделать на HTML с минимальными затратами труда и времени.
Язык HTML дает огромные преимущества перед многими другими способами представления информации с помощью компьютера.
1. Язык HTML и его реализация
Что такое HTML
Термин HTML (HiperText Markup Language) переводится на русский как "Язык манипулирования гипертекстами".
Ключевым здесь является слово "гипертекст". Под ним подразумевается, в отличие от простого текста, возможность создания полноценных документов, содержащих разнообразные шрифты, графику, звук, что достигается путем включения в текст специальных указаний (их иногда называют "тэгами"). Структура тэгов четко оговорена в описании языка.
Выдача гипертекстового документа (или, как часто говорят, "страницы") на экран или бумагу производится в соответствии с этими указаниями. Однако в подавляющем большинстве случаев автор документа не оговаривает многие детали, считая, что они некритичны. Тогда программа, осуществляющая выдачу документа, использует запомненные ею - при создании или в процессе настройки пользователем - значения. Таким образом, одна и та же HTML-страница может отображаться по разному на разных машинах, и даже на одной машине в разные моменты времени.
Приведем примеры.
Обычно в HTML-странице не оговаривается шрифт текстовой части документа - не указано ни название шрифта, ни его размер. Ясно, что выдача на машине с установленным по умолчанию значением размера шрифта в 10 пунктов будет выглядеть совершенно не так, как на машине со шрифтом в 18 пунктов.
Даже при одинаковых шрифтах в окнах разного размера страница будет отличаться - станет длиннее в узком окне (попробуйте сейчас и посмотрите).
Конечно, можно указать полностью все параметры страницы. Но, во-первых, зачем? Сильно ли изменится впечатление от страницы на экране монитора, если шрифт будет выглядеть немного не так? Или Вы указали очень мелкий шрифт, а у того, кто смотрит вашу страницу, похуже монитор (или зрение...)
Во-вторых, нет гарантии, что все ваши указания будут выполнены буквально. Скажем, уверены ли Вы, что используемый Вами экзотический шрифт установлен на всех машинах, где будут читать документ? Или что все экраны позволят иметь заданную Вами ширину страницы?
Так что оставим побольше свободы читающему - ведь HTML-страницы в основном предназначены не для бумаги, а для экрана.
Второй важнейшей особенностью языка HTML является возможность включения в документ ссылок на другие документы. Внешне ссылка выглядит как выделенное (например, цветом или подчеркиванием) место текста или рисунка. Поставив указатель мыши на это место и нажав кнопку, мы получим на экране новый документ - тот, который был указан в ссылке. Таким образом появляется возможность переходить с одного документа на другой, возможно, даже расположенный на другой машине (разумеется, если ваша машина подключена к сети).
Программы просмотра HTML-страниц
html страница программа браузер
Чтобы выдать на экран или напечатать HTML-страницу, нужна специальная программа - браузер. Поскольку язык HTML весьма распространен, написано довольно много таких программ, чем-то (иногда сильно) отличающихся между собой. Большинство из них ориентированы на работу в оконной графической среде.
Рассмотрим кратко самые ходовые браузеры.
Google Chrome - браузер <https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80>, разрабатываемый компанией Google <https://ru.wikipedia.org/wiki/Google_(%D0%BA%D0%BE%D0%BC%D0%BF%D0%B0%D0%BD%D0%B8%D1%8F)> на основе свободного браузера Chromium <https://ru.wikipedia.org/wiki/Chromium> и движка Blink <https://ru.wikipedia.org/wiki/Blink_(%D0%B4%D0%B2%D0%B8%D0%B6%D0%BE%D0%BA)> (до апреля 2013 года использовался WebKit <https://ru.wikipedia.org/wiki/WebKit>). Первая публичная бета-версия <https://ru.wikipedia.org/wiki/%D0%91%D0%B5%D1%82%D0%B0-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5> для Windows <https://ru.wikipedia.org/wiki/Windows> вышла 2 сентября 2008 года, а первая стабильная - 11 декабря 2008 года. По данным StatCounter <https://ru.wikipedia.org/wiki/StatCounter>, Chrome используют около 300 миллионов интернет-пользователей, что делает его самым популярным браузером в мире - его рыночная доля в июле 2014 года составила ▲48,71 %[12] <https://ru.wikipedia.org/wiki/Google_Chrome>. По данным LiveInternet <https://ru.wikipedia.org/wiki/LiveInternet>, в феврале 2015 года с долей ▲31,9 % Chrome занимает первое место и в Рунете <https://ru.wikipedia.org/wiki/%D0%A0%D1%83%D0%BD%D0%B5%D1%82>. веб-браузер <https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80> и пакет прикладных программ <https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%BA%D0%B5%D1%82_%D0%BF%D1%80%D0%B8%D0%BA%D0%BB%D0%B0%D0%B4%D0%BD%D1%8B%D1%85_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC> для работы в Интернете <https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82>, выпускаемый компанией Opera Software <https://ru.wikipedia.org/wiki/Opera_Software>. Разработан в 1994 году группой исследователей из норвежской <https://ru.wikipedia.org/wiki/%D0%9D%D0%BE%D1%80%D0%B2%D0%B5%D0%B3%D0%B8%D1%8F> компании Telenor <https://ru.wikipedia.org/wiki/Telenor>. С 1995 года - продукт компании Opera Software, образованной авторами первой версии браузера.
Суммарная рыночная доля Opera и Opera Mobile <https://ru.wikipedia.org/wiki/Opera_Mobile> в апреле 2014 года составила ▲1,37 % - пятое место в мире. В России процент пользователей браузера гораздо выше среднемирового. В первом квартале 2014 года по данным Openstat <https://ru.wikipedia.org/wiki/Openstat> доля браузера Opera в Рунете составила ▼14.39%.
Браузер Opera портирован под множество операционных систем <https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0> (включая Windows <https://ru.wikipedia.org/wiki/Windows>, OS X <https://ru.wikipedia.org/wiki/OS_X>, Linux <https://ru.wikipedia.org/wiki/Linux>; ранее имелись версии для FreeBSD <https://ru.wikipedia.org/wiki/FreeBSD>, Solaris <https://ru.wikipedia.org/wiki/Solaris>). Также существуют версии браузера для мобильных платформ на основе Symbian OS <https://ru.wikipedia.org/wiki/Symbian_OS>, MeeGo <https://ru.wikipedia.org/wiki/MeeGo>, Java <https://ru.wikipedia.org/wiki/Java>, Android <https://ru.wikipedia.org/wiki/Android>, Windows Mobile <https://ru.wikipedia.org/wiki/Windows_Mobile>, bada <https://ru.wikipedia.org/wiki/Bada>, iOS <https://ru.wikipedia.org/wiki/IOS>. Opera для ПК <https://ru.wikipedia.org/wiki/%D0%9F%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80> и Opera Mini <https://ru.wikipedia.org/wiki/Opera_Mini> распространяются бесплатно с 2005 года, Opera Mobile <https://ru.wikipedia.org/wiki/Opera_Mobile> - с 2010 (бета-версии с 2009). 13 февраля 2013 года разработчики заявили о переводе всей линейки продуктов Opera Software на движок WebKit <https://ru.wikipedia.org/wiki/WebKit> и V8 <https://ru.wikipedia.org/wiki/V8_(%D0%B4%D0%B2%D0%B8%D0%B6%D0%BE%D0%BA_JavaScript)>.Firefox - свободный <https://ru.wikipedia.org/wiki/%D0%A1%D0%B2%D0%BE%D0%B1%D0%BE%D0%B4%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5> браузер <https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80> на движке Gecko <https://ru.wikipedia.org/wiki/Gecko>, разработкой и распространением которого занимается Mozilla Corporation <https://ru.wikipedia.org/wiki/Mozilla_Corporation>. Третий по популярности браузер в мире и первый среди свободного ПО <https://ru.wikipedia.org/wiki/%D0%A1%D0%B2%D0%BE%D0%B1%D0%BE%D0%B4%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5> - в июле 2014 года его рыночная доля составила ▼17,52 %. Браузер имеет особенный успех в некоторых странах, в частности, в Германии <https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D1%80%D0%BC%D0%B0%D0%BD%D0%B8%D1%8F> это самый популярный браузер с долей 43,07 % на июль 2014 года. В России Firefox занимает второе место по популярности среди браузеров для ПК с долей ▼16,72 % пользователей на октябрь 2014 года. Explorer - программа-браузер <https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80>, разрабатывавшаяся корпорацией Microsoft <https://ru.wikipedia.org/wiki/Microsoft> с 1995 года по 2015 год. Входила в комплект операционных систем семейства Windows <https://ru.wikipedia.org/wiki/Windows> вплоть до Windows 10.
Согласно разным методам подсчета, доля Internet Explorer среди пользователей варьировала между 24,64 % и 58,15 % (на январь 2014 года).
Со времени выхода первого релиза <https://ru.wikipedia.org/wiki/%D0%A0%D0%B5%D0%BB%D0%B8%D0%B7_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5)> Microsoft добавила ряд функций и технологий. Среди них - отображение таблиц HTML <https://ru.wikipedia.org/wiki/HTML> (в Internet Explorer 1.5); интерфейс программирования приложений XMLHttpRequest <https://ru.wikipedia.org/wiki/XMLHttpRequest> (в Internet Explorer 5), который помогает создавать динамические сайты; и интернационализованные доменные имена (в Internet Explorer 7), что позволяет давать сайтам адреса символами не только латиницей.
Каждый браузер имеет отличия от других, приводящие в некоторых случаях к отличиям в отображении HTML-документов. Небольшая разница в изображении, в общем-то, непринципиальна, но, к сожалению, иногда разработчики вносят собственные дополнения в язык HTML, в результате чего документы, сделанные под конкретный браузер, невозможно увидеть в других. Особенно грешит этим фирма Microsoft, поэтому, даже используя их Explorer, лучше не пользоваться расширениями языка. Кстати, их расширения, сделанные для языка Java, также поддерживаемого Explorer'ом, привели к тому, что распространение вирусов по сети существенно упростилось - для машин, на которых работает Explorer.
2. Основы языка
Структура HTML-страницы
Большинство элементов языка HTML по своей сути являются скобками. Открывающая скобка отмечает начало части страницы, обладающей некоторыми свойствами, закрывающая отмечает конец этой части. Все, что находится между скобками, одинаково с точки зрения этих свойств. Например, можно задать для части текста цвет, отличающийся от цвета остальных частей.
Скобками элементы являются именно по сути, а по форме это не скобки в традиционном виде, а конструкции следующего вида:
<слово>
выделяемая скобками часть
</слово>
<слово> задает начало выделяемой части и вид конкретных скобок (например, для изменения цвета можно задать <FONT>), а то же слово в тех же знаках < >, но с дробной чертой перед словом - окончание этой части (</FONT>). Список возможных слов фиксирован в описании языка.
Вся HTML-страница заключается в пару скобок
<HTML>
</HTML>
(Еще раз подчеркнем, что каждая скобка - это не один знак, а все, что находится между символами < >, и сами эти символы.)
Итак, все, что находится между скобками <HTML> и </HTML> - это HTML-страница. Каждая страница должна храниться в отдельном файле.
Страница состоит из двух частей - заголовка и тела.
Заголовок задает оформление страницы в целом, и может вообще отсутствовать. Так что отложим его рассмотрение на следующие главы, а здесь просто отметим, что начало заголовка отмечается скобкой <HEAD>, а конец - скобкой </HEAD>.
А вот тело отсутствовать не должно - что же это получится за страница, на которой ничего нет.
Начинается тело страницы скобкой <BODY>, заканчивается - </BODY>.
Теперь мы можем записать общую структуру страницы в таком виде:
<HTML>
<HEAD>
заголовок
</HEAD>
<BODY>
тело страницы
</BODY>
</HTML>
Если Вы поняли этот раздел, то уже сейчас можете создать простейшую HTML-страницу, в которой будет текст и ничего более. Создайте файл с любым именем и расширением.HTM, любым текстовым редактором (например, встроенным в Norton Commander или редактором Записная книжка из стандартного комплекта MS Windows 3.x/9x/2000), поместите в него приведенные элементы структуры, вместо слов "тело страницы" напечатайте свой текст - и страница готова.