О том, что такое Интернет Вы уже ознакомились в разделе компьютерные сети. Так что перейдем непосредственно к сути данного
раздела. Давайте разберемся, что же такое HTML и какое он имеет отношение к сети Internet.
Internet - глобальная компьютерная сеть, соединяющая тысячи, да что там, миллионы компьютеров по всему земному шару. Здесь даже
не идет речь о том, какие именно компьютеры, поскольку к сети Internet подключены как персональные компьютеры, так и мейнфреймы, рабочие станции,
карманные ПК и даже мобильные телефоны. Впервые сеть, похожая на Internet, а вернее ее "предок", появилась в 1968 году. Тогда в США компанией ARPAnet
была представлена компьютерная сеть между двумя мощными компьютерами. Компьютеры работали под управлением консольных операционных систем, типа DOS, и
соответственно компьютерная сеть так же управлялась под такой системой. В начале 80-х годов прошлого века сеть измерялась уже в мировых масштабах,
компьютерной сетью пользуется даже королева Великобритании Елизавета II. Именно тогда данная компьютерная сеть была названа как Internet (от
слова inter - мировой, и net - компьютерная сеть).
В 1989 году в Женевской лаборатории физики элементарных частиц ученый Тим Бернерс Ли разработал своего рода некий язык программирования,
способный передавать текст в компьютерной сети с помощью специального стиля разметки текста. В дальнейшем все, что связано с таким типом разметки,
было названо как гипертекстовая разметка.
HTML (Hyper Text Markup Langurage) - язык разметки гипертекста. Что собственно собой представляет HTML? Это вроде языка программирования
самого низкого уровня. Он проще, чем Basic, поскольку для его реализации на компьютере нет необходимости в установке специального программного
обеспечения. Если Вы работаете в Windows, то для начала хватит и простого Блокнота. В других операционных системах (например Linux, OS/2, etc)
используются другие редакторы из области "текстовых". HTML стал неотъемлимой частью интернета, это произошло после того, как в 1991 году все тот же
Тим Бернерс Ли создал World Wide Web - мировая глобальная паутина. И действительно: такая сеть, как Интернет, представляет собой некую паутину,
к которой подключены компьютеры и тому подобные средства со всего мира. Но вернемся к теме.
Гипертекст - это тот же текст, только предназначение у него несколько другое. В среде гипертекста различные текстовые блоки связывались
между собой ссылками. Ссылка - это элемент, указывающий на локальный или глобальный ресурс, к которому возможен доступ с компьютера. Примеры
ссылок - ярлыки на рабочих столах графических операционных систем. От ссылок их отличает только то, что они выполнены не в виде текста, а в виде неких
мелких программ. В Windows и в других операционных системах ярлык позволяет выполнить ту или иную программу, расположенную на компьютере, на которую
он ссылается. То есть ярлык Мой компьютер ссылается не на корзину, и поэтому он никогда не откроет вам корзину, поскольку он не ссылается на нее.
Ссылки в среде гипертекста позволяет моментально перейти к какому-нибудь тексту в другой части документа либо к другому подобному текстовому
документу. Как оказалось, на этом функции гипертекста ограничиваются. Неинтересно постоянно простамривать один и тот же текст и ссылки на другие
тексты. Первоначально в HTML отсутствовала всякая визуализация: текст был одного типа, но его можно было распологать на странице. Позже стали стали
модернизировать гипертекст и вносить в него множество поправок, которые касаются визуального оформления. В гипертекст внедрили множество команд,
способных украшать страницу гипертекста. Постепенно гипертекстовая среда переросла в среду гипермедия.
При развитии современного HTML в него были внесены возможности отображения на страницах графических объектов (изображений, картинок), изменение
шрифта текста (используются шрифты, которые является страндартнымы в операционной системе), воспроизведение видео- аудио-файлов и многое другое.
Ранее ссылка была только текстовой, теперь же ссылкой может быть картинка, анимация, видеоролик и тому подобное.
Раньше для того, чтобы войти в сеть Internet необходимо было использовать командную строку. При этом пользователь, чтобы получить доступ к
тому или иному компьютеру в сети, должен был знать весь сетевой путь, учитывая имена каталогов и файлов. Сейчас для входа в Internet и просмотра
доступной информации, используются браузеры.
Браузер (от слова "brouse" - обзор) - программа-обозреватель, позволяющая просматривать документы, в которых использована гипертекстовая
разметка, отделяет исходный код от текста. Первым таким браузером считается Mosaic - графический браузер, разработанный компанией NCSA в 1992
году. Он позволяет переходить по любой ссылке с помощью одного щелчка мышки. Позже был выпущен всемирно-известный Natscape Navigator, а уже
с выходом Windows 95 в его поставку входил браузер Internet Explorer, который, как оказалось, имел сравнительно низкое качество, нежели два
предшественника. Такой поворот событий испугал конкурентов, ведь тогда зачем создавать браузер для пользователей Windows, если он в ней уже есть?
Известнейший Internet Explorer был основан на Mosaic. Лицензию на его владение купила Microsoft дабы использовать в своих операционных
системах. Есть версия Internet Explorer для Unix-систем, который практически ничем не отличается от версии для Windows.
Первое знакомство с HTML
Как Вы уже поняли, HTML и www - это два сапога - пара, то есть вещи близкие. Сейчас именно HTML является основным при создании web-страничек.
Web-страничка - это документ, который отображается в браузере.
Гипертекст - он только назван так, поскольку применяется в среде гипетмедия. На самом деле это обычный текст, который ничем не хуже и не лучше
обычного текста, который мы умеем набирать в любом текстовом редакторе (например: Word, Open Text, Kate и тому подобыне). Обычно текст с гипертекстовой
разметкой храниться в файле, имеющем расширение .htm или .html. Для того, чтобы создать такой файл можно использовать любой текстовый
редактор, вплоть до редактора Edit из DOS или ему подобных. Мы же при обучении будем использовать текстовый редактор "Блоктнот". О более
профессиональных редакторах я расскажу попозже, когда Вы освоите блоктнот. Создавать и наслаждаться просмотром готового интеллектуального продукта
можно одновременно: в Блокноте создаете, а в браузере просматриваете. Такова же схема работы любого разработчика. При внесении изменений браузер
необходимо будет перезагружать. В Windows и в Linux для обновления используется клавиша F5.
Операции над объектами и текстом выполняют команды, которые в HTML называют "тэги" (от английского слова "гусь"). Любая такая команда
заключается в квадратные или трехугольные скобки - < и >. Для вставки тега в текст WEB-странички нам понадобиться его открыть в любом
текстовом редакторе. Как сказано выше, мы будем использовать блокнот Windows.
Теги бывают открывающими и закрывающими. Открывающий тег свидетельствует о том, что все, что находиться в нем, должно подчиняться
команде, вписанной в этот тег. Любой такой тег имеет параметры. Закрывающий тег закрывает зону действия открывающего тега и не имеет никаких
параметров. О том, что тег закрывающий, свидетельствует значок "/" (бэкспейс). Многие команды состоят всего из одного тега, или не имеет
закрывающего тега. Более четко принцип действия тегов Вам может показать следующий пример:
<команда1 параметры="значение">
Просто текст.
</команда1>
Здесь на примере показан открывающий тег "команда1" с параметрами, после него идет текст и заканчивается все это закрывающим тегом "команда1". Все,
что внесено в трехугольные скобки, не отображается в окне браузера. Текст, который вписан между открывающим и закрывающим тегами будет отображен в окне
браузера с теми параметрами, которые ему предписывает "команда1".
Парметры бывают самыми различными, это зависит от того, какой именно параметр вы хотите предписать элементу (тегу). Большое количество
тегов могут иметь сходные параметры, которые будут настраиваться согласно имеющимся правилам. Таким образом, если параметр должен указывать размер
шрифта в цифрах, то Вы ничего не добьетесь, если напишите вместо цифрового значение буквенное. Значение параметра записывается в кавычки, но
современные не сочтут за ошибку, если Вы напишите значение без кавычек (хотя лично я все-таки рекомендую их использовать).
Если закрывающий тег в примере не записать, то команда все равно выполниться, таков принцип действия браузеров. Только это будет неправильно. В
этом случае весь последующий текст будет отображен с параметрами, которые ему задает "команда1".
А теперь немного из истории развития HTML.
Сам язык HTML появился в 1989 году. Его разработчик - Тим Бернерс Ли, подробности Вы могли прочитать выше. Официальная версия HTML 1.0 вышла
в 1990 году. Следующая версия HTML 2.0 вышла в 1992 году. Позже вышла версия HTML 3.0, затем, по недостаче возможных нововведений в язык разметки, была
выпущена версия HTML 3,2, которая отличалась от предыдущей только номером версии. В 1996 году был выпущен язык расширенной разметки - XML (Extended
Markup Language), а в 2000 году был разработан язык XHTML (Extended Hyper Text Markup Language), или расширенный язык разметки гипертекста.
/Из-за того, что предлагаемых стандартов было предложено очень большое количество, был создан консорциум по развитию стандартов сети Internet -
W3C (расшифровуется как триWWW консорциум). Это был независимый консорциум, в составе которого было около 140 экспертов со всего мира.
Консорциум не мог что-либо у кого либо купить и присвоить себе, они могли только что-либо рекомендовать после специальных исследований.
Создание простого документа "Hello, World!"
Перед пробой пера нам необходимо четко определиться, где мы будем хранить готовые html-документы. Я советую создать для них отдельную папку на диске
D:, но не на диске C:, поскольку этот диск является системным и при крахе операционной системы Windows Ваши готовые документы могут пострадать. Если же
Вы уверены в надежности своей Windows, то можете этого и не делать, но для html-документов папку все же создать прийдется. Назовите ее
"Мой сайт". В ней будут храниться созданные Вами проекты, разложенные по папкам. Создайте в папке "Мой сайт" еще одну, под названием "Мой
первый проект". В ней Вы и будете хранить свой первый проект.
Ну а теперь, когда папки созданы, начнем. Запускаем текстовый редактор Блоктнот. В нем набираем то, что Вы видите сейчас на экране. Не
пытайтесь выделить и скопировать текст в блокнот одним махом, это Вас ничему не научит.
<html>
<head>
<title>
Hello, world!
</title>
</head>
<body>
Всем привет! Это моя первая страничка.
</body>
</html>
После того, как текст был введен, сохраните его с помощью команды Файл->Сохранить как.... Задайте имя файлу: index и расширение
.html, можно задать расширение .htm, это особой роли не играет. На будущее следует помнить, что любые подобные файлы следует называть
index. Если на сайте много таких страниц, одна из них должна быть стартовой, или главной. Когда какой-нибудь пользовать зашел на Ваш сайт, он должен
первым делом попасть на главную страницу, на которой обычно распологают приветствие. Для того, чтобы браузер определил, какая именно страница является
стартовой, ей необходимо дать имя index (индексирующая страница).
Еще один нюанс, относительно имен создаваемых файлов. Файлы должны иметь только латинские символы или арабские цифры!!! И все они
в маленьком регистре!!! Допустимы так же знаки подчеркивания и дефисы, но никаких пробелов!!!. Это основное правило создания имен для
страничек и касается оно не только самих html-файлов, но и входящих в Ваш сайт других файлов (например изображений, звуков, папок и т. п.). Недопустимо
использовать русскоязычные имена, а так же имена с заглавных букв для ваших страничек, это противоречит стандтру, используемому при размещении сайта
на специальном WEB-сервере - компьютер, на котором размещается готовый сайт и который просто не поймет русскоязычных имен, да еще и с заглавными
буквами.
Исходный код - это текстовая версия программы, которую можно в любой момент изменить и внести свои поправки, а потом откомпилировать.
Существует два состояния исходного кода: открытый исходный код и закрытый исходный код. Пример закрытого исходного кода в Windows служат приложения в
формате .exe, .com и тому подобные. Примером открытого исходного кода служат текстовые версии приложений, которые еще небыли откомпилированы и
могут быть сохранены в в документах с расширением .txt, .cpp (для языка программирования C++) и тому подобные. Наши с Вами документы HTML имеют
открытый исходный код, а значит мы сможем их изменять в любой момент.
Структура HTML-документа
Только что Вы создали самый простой документ. Как понять, что означают все эти слова в треугольных скобках? Любой подобный документ имеет и обязан
иметь структуру разметки документа. В данном случае Наш документ можно условно разбить на следующие части, как показано ниже:
<html>
<head>
<title>
Hello, world!
</title>
</head>
<body>
Всем привет! Это моя первая страничка.
</body>
</html>
В темно-синей рамке показана вся страница со всем ее исходным кодом. Любую web-страничку можно разделить на две части: шапка и тело.
В данном случае шапка документа находиться в грубо синей рамке вверху. В шапку документа вписывается информация, которая будет отображена вверху, над
окном браузера. В тело документа, которое представлено в слабенько голубоватой рамке, вписывается все содержимое странички. Если же попробовать
поменять распределение текста и заглавия страницы, то в итоге браузер ничего не отобразит и выдаст ошибки при загрузке страницы.
Теперь давайте разберем, какие теги были использованы в данном примере:
тег html - обязательный тег. Определяет начало документа и его пренадлежность к языку разметки HTML. В него записывается все содержимое
страницы, которое можно разделить на две части - шапка и тело. Имеет закрывающий тег, который расположен в конце документа. Команда html не имеет
параметров;
тег head - обозначает начало "шапки" документа. Имеет закрывающий тег, который определяет, где заканчивается шапка документа. В шапку
документа не вноситься текст, который должен отобразиться в окне браузера;
тег title - тег позволяет создать заглавие страницы. Между открывающим и закрывающим тегом title вноситься обычный текст, который будет
отображаться вверху окна браузера. Текст можно вносить любой. Данный тег вноситься только в шапку документа, то есть между открывающим и закрывающим
элементом head;
тег body - тег, обозначающий начало тела документа. Уже непосредственно в нем мы и будем работать на протяжении всех остальных уроков.
Тег body имеет множество параметров, которые мы расмотрим позже. Остальные примеры по HTML-кодам будут вписываться именно в тело документа.
Ну а теперь перейдите в каталог, в котором Вы сохранили данное творение. Перейти в него можно через проводник Windows - Мой компьютер. Загрузите
документ в окно браузера и просмотрите результат своей работы. В некоторых случаях кодировка документа может быть не такая, как Вам нужна. Поэтому
для исправления ситуации выберите в меню Вид->Кодировка->Кириллица (DOS) или Кириллица (Windows). Может так же помочь галочка в функции
"Автовыбор". Меню "Кодировка" есть так же в контекстном меню, которое можно вызвать, щелкнув правой кнопкой мышки на самом документе.
Ну а теперь Ваша первая страничка готова. Можно запустить ее для просмотра, щелкнув на файле html дважды левой кнопкой мышки. Ну как? Вам
нравиться Ваша работа? Это только начало, дальше больше.
Выберите в контекстном меню, которое Вы открыли на самой странице, функцию "Просмотр HTML-кода". Откроется Ваш Блокнот, в котором
Вы работали при создании документов.
Текст на web-страничке
Мы создали очень простую страничку. Равных по простоте страниц в интернете Вы вряд ли найдете, не смотря на то, что Интернет, как мы знаем, это
огромнейшая компьютерная сеть и чего только в ней не найдешь. Следующий шаг - это текст в HTML. Попытаемся расположить на страничке какой-нибудь
текст и попробуем его как следует преукрасить всяческими доступными методами.
Любая информация, необходимая для пользователя, всегда представляется в HTML в нескольких видах. Самый распрастраненный тип информации,
который используется для отображения на страничках - это текстовая информация. Мы можем рассказать с помощью текста о себе, о своих увлечениях, об
играх, о музыке и музыкальных исполнителях, ну в конце концов это полноценное резюме или автобиография. Так вот на следующем шаге по изучению HTML
будет создание автобиографии, или резюме.
Перед подобной операцией следует рассмотреть, что можно сделать с текстом в мощном текстовом редакторе (например Open Office, Microsoft Office
Word и т. д.). Текст можно отобразить полужирным, курсивом или подчеркнутым, а можно применить это все вместе и сразу. Это можно делать и в HTML. Но
это не все, что Мы можем сделать с текстом в HTML.
HTML перетерпел столько модернизаций, что за его короткую казалось бы историю (всего 16 лет) в стандартном наборе команд HTML-языка происходили
изменения, касающиеся почему-то именно тегов для форматирования текста. Большинство других тегов остались нетронутыми еще со времен выпуска первой
версии языка HTML. Вы в этом убедитесь, когда мы будем рассматривать многочисленные команды для форматирования текста. Начнем с простых. Введите в
исходный код своего html-документа то, что Вы видите ниже:
<b>
Всем привет! Это моя первая страничка.
</b>
<br />
<i>
Сайт пользователя Иван Иваныча.
</i>
Впишите в свой документ те команды, которые написаны в данном примере и перезагрузите документ. Имя разумеется введите свое, а можете и не свое и
не имя. Посмотрите на результат. В итоге "Всем привет! Это моя первая страничка." должна быть выделена жирным текстом, а "Сайт пользователя Иван
Иваныча" - курсивом. Соответственно каманда <b> позволяет делать текст полужирным, а команда <i> позволяет делать текст
курсивным. Два предложения отделяет команда <br />. Это одиночная команда, которая ставиться обычно между двумя абзацами и позволяет
начинать текст с новой строчки. Попробуйте выполнить данный пример без использования команды <br /> и вы убедитесь, что без нее текст
выглядит не очень корректно, то есть оба предложения слиты в одно целое. Это некрасиво.
Вот что у Вас должно было получиться:
Всем привет! Это моя первая страничка.
Сайт пользователя Иван Иваныча.
Вот как бы выглядел Ваш текст без тега <br />:
Всем привет! Это моя первая страничка.
Сайт пользователя Иван Иваныча.
Рассмотрим команды логического форматирования текста, которые применяются к тексту так же, как и в данном примере.
b - текст, помещенный между открывающим и закрывающим тегами, делается полужирным. Тег можно применять как к предложениям, так
и к отдельным словам и даже буквам;
i - курсивный текст. Применять можно аналогично предыдущему;
u - подчеркнутый текст, применяется аналогично предыдущим, имеет закрывающий тег;
blockquote - отображает текст, как цитату. Цитируемый текст отображается отдельным абзацем, с отступами от боковой линии и
от текста, расположенного выше. Имеет закрывающий тег;
s - текст отображается зачеркнутым;
big - аналогичен тегу b, то есть делает текст полужирным;
tt - отображает текст особым, моноширинным шрифтом, используемым в устаревших операционных системах, типа DOS;
cite - аналогичен тегу blockquote, только по размеру предназначен для меньших цитат;
var - отображает текст курсивом, подобен тегу i;
fieldset - при использовании этого тега текст помещается в некую рамку, размер которой равен размеру страницы;
strike - устаревший прародитель тега s, позволяющий создавать перечеркнутый текст;
pre - отображает текст таким, каким он создан в текстовом редакторе, то есть со всеми пробелами, табуляцией и тому подобное.
Недостаток заключается в том, что текст отображается моноширинным шрифтом;
adress - отображает текст курсивом, аналогичен элементу i;
code - отображает текст моноширинным шрифтом, идентичен тегу tt;
samp - отображает текст моноширинным шрифтом, идентичен тегам code и tt;
kbd - отображает текст моноширинным шрифтом, идентичен тегам code и tt, имеет закрывающий тег;
sub - отображает текст со сдвигом вниз относительно линии текста;
sup - отображает текст со сдвигом вверх относительно линии текста. Теги sup и sub удобно использовать при написании
степеней, номеров химических элементов и тому подобное;
strong - отображает текст в полужирном виде, аналогичен элементу b;
em - отображает текст курсивом, аналогичен элементу i;
Несколько устаревших тегов, которые больше не используются в современной спецификации HTML:
xmp - отображает текст с новой строчки моноширинным шрифтом, подобно тегам tt, samp, в настоящее время уже не
используется в HTML, но еще поддерживается большинством браузеров;
listing - отображает текст моноширинным шрифтом с новой строчки и в уменьшенном размере, не имеет закрывающего тега;
plaintext - позволяет отобразить на страничке текст исходного кода странички с тем форматированием, которое ему было задано в
исходном коде, не имеет закрывающего тега, а поэтому отображает весь исходный код странички, начиная от места вставки команды и до конца;
Можно применить все эти теги к тексту в любом количестве, любой последовательности и как к отдельным словам, так и буквам. Например:
<b><u>
Всем привет! Это моя первая страничка.
</u></b>
<br />
<i>
Сайт пользователя Иван Иваныча - самого <b>умного</b> человека на <u>всей</u>
<b>З</b>емле.
</i>
Мы получим:
Всем привет! Это моя первая страничка.
Сайт пользователя Иван Иваныча - самого умного человека на всейЗемле.
Вы наверное обратили внимание на то, что подобных тегов к любому слову или предложению можно применить большое количество? Да, это верно - можно
применить таких тегов столько, сколько душе будет угодно, но при этом следует правильно соблюдать расстановку таких тегов. Например:
<b>
<u>
<s>Всем привет! Это моя первая страничка.</s>
</u>
</b>
Здесь в данном примере показана структура расстановки команд логического форматирования текста. В итоге мы получим следующее:
Всем привет! Это моя первая страничка.
Нарушением данной структуры будет смена мест закрывающих тегов. Хотя конечно браузер не сочтет это за ошибку, но это будет считаться неправильной
расстановкой тегов. Обратите внимание, как идет расстановка в примере: сначала идет тег b, в него вложен тег u, в него вложен тег
s, уже в этот тег вложен текст, а потом идут закрывающие теги в обратном порядке: сначала закрывается s, потом u, а потом
b, на этом расчет окончен. Это и есть правильное расположение тегов.
Теперь, в качестве закрепления данного материала, попробуйте пофантазировать над изученными тегами и поприменяйте к созданному тексту данные
теги. Мы еще не раз вернемся к ним дабы еще больше и полнее отобразить различные ньюансы работы с HTML. Следующий раздел будет посвящен подробному
описанию этих и других тегов форматирования текста.
Форматирование текста
Рассмотренные выше теги относятся по типу к тегам линейным - это теги, которые не имеют параметров, предназначены только для текстовых блоков,
используются в любом количестве, в любом положении и в любом порядке. Есть так же и блочные теги - это теги, которые отделяют текст от другого
текста. Отформатированный такими тегами текст всегда отображается с новой строки.
Блочным элементом является элемент p.
Ссылки (Гиперссылки)
Ссылка (link) или гиперссылка - это элемент html-документа, ссылающийся на другие html-документы или ресурсы в интернете. Чтобы
загрузить объект, на который ссылается ссылка, необходимо щелкнуть по ней один раз левой кнопкой мышки. При наведении курсора мыши на ссылку, в
браузере внизу (на панели состояния) отображается адрес, на который ссылается гиперссылка. Иногда этого не происходит, если с сылкой используется
како-нибудь сложный программный код. В таком случае можно просмотреть адрес назначения ссылки через контекстное меню, которое можно вызвать
нажатием правой кнопки мыши на ссылке и выбрать в нем "Свойства" ("Properties"). В полученном диалоговом окне указан адрес, на который ссылается
ссылка.
Ссылкой может быть как текст, так и графический объект на страничке. При наведении мышкой на ссылку курсор мыши меняется на руку.
Ссылки на страничке размещаются с помощью тега a и некоторых параметров, которые в нем указываются. Самый важный параметр ссылки - это
адрес, на который ссылается ссылка. Выглядит ссылка обычно так:
<a href="http://www.mail.ru">Почта на Mail.Ru</a>
Элемент a имеет открывающий и закрывающий теги. Попробуйте разместить вот такой вот текст у себя на страничке и если Ваш компьютер
подключен к интернету, то переход по этой ссылке в окне браузера приведет Вас к стартовой странице Российского почтового сервера Mail.ru.
А вот так выглядит более сложная ссылка:
<a href="http://www.mail.ru" title="Ссылка на Mail.ru" target="_blank">Почта на Mail.Ru</a>
Теперь рассмотрим параметры, используемые в ссылках.
href - обязательный параметр. В него вписывается полный адрес интернет-ресурса, в данном примере это адрес http://mail.ru.
Адрес сайта, который вписывается в данный параметр, всегда должен начинатся с 'http'. В зависимости от типа интернет-ресурса, на который
ссылается ссылка (сайт, файловое хранилище, электронная почта и пр.) данный фрагмент текста тоже может быть другим, но об этом чуть позже.
