Как выглядит самая простая страница HTML

Урок 1. Введение. Первое знакомство с HTML

Конечно же, в интернете много материала по HTML, много примеров и хороших справочников. Надеюсь, моё изложение будет отличаться от предложенных статей. Так же мы всегда сможем обсудить любые моменты. И если вам что-то будет не понятно – спрашивайте, с радостью отвечу на любые вопросы. Буду стараться писать простым языком. Поехали…

Определение

На этот вопрос можно найти ответ на wiki. Здесь ничего нового я вам не скажу. Но в двух словах перескажу, чтобы не терять мысль. HTML – это аббревиатура HyperText Markup Language, что в переводе с английского означает «язык гипертекстовой разметки». Правильнее было бы немного по-другому сформулировать вопрос, чтобы понять суть: Откуда он взялся? Почему именно HTML? Как он работает? И мой самый любимый вопрос, на который я долго не знал ответа (когда начинал его изучать), а многие авторы учебников подразумевают, что новички уже в курсе: Что такое гипертекст?

Небольшое историческое отступление

Вы знаете, почему современный компьютер выглядит именно так? Почему именно такая архитектура? Единственным исключением является фирма Apple, чудесным образом выжившие на рынке (я имею в виду 80е-90е годы). Первые компьютеры были не такими как сейчас, это были довольно примитивные, в плане технологий, устройства. Направлений и архитектур было очень много, среди них были IBM PC (предок наших компьютеров и ноутбуков) и Apple.

Первый компьютер Apple
Первый компьютер Apple

В силу своей примитивности и простоты паять платы компьютеров начали все кому не лень, в гаражах, подвалах. Но паялись подделки на существующие бренды. IBM-PC была одна из немногих фирм, которая не преследовала подделки на свои компьютеры. И большинство начали подделывать именно их. Спустя какое-то время огромное количество компьютеров IBM-PC, и подделок, и оригиналов, составляло большую часть от всех компьютеров. Когда начали выпускать дополнительную периферию, обновления и дополнения. Получилось так, что именно для IBM-PC нужны были периферийные устройства и новые комплектующие. Была востребована именно совместимость. Комплектующие других фирм покупались плохо, у большинства были IBM.

Первый компьютер IBM-PC
Первый компьютер IBM-PC

Как появился HTML

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

Почему мы используем HTML сейчас

Этот формат прижился, потому что не требует никаких дополнительных программ, приложений, систем. Это обычный текстовый файл, в котором содержится информация в некотором формате. А так же, предусмотренная возможность использовать ссылки на другие документы, очень хорошо вписалась в концепцию структуры сайтов – страница со ссылками на другие страницы, по которой легко перейти в другой документ. В современном понимании HTML документ представляет нечто большее, чем просто текстовый документ. Картинки, используемые в документах, лежат рядом как отдельные файлы. Так же, чтобы не «захламлять» код документа, в отдельный файл выносятся таблицы стилей (CSS) – некоторые описания форматированного текста. В данной статье я не буду останавливаться подробно на том, что такое CSS, поскольку это некоторая фича для удобства. Мы рассмотрим этот элемент более подробно в одной из следующих статей. В современных HTML документах есть мультимедийные дополнения (анимированные флэшки), скрипты. Все они так же хранятся отдельными файлами.

Что такое гипертекст

Если мы откроем текстовый документ с помощью текстового редактора (notepad), то увидим только текст, чтобы мы не написали – это всего лишь текст. Если мы хотим сослаться на другой документ и сделать так, чтобы достаточно было просто кликнуть по участку текста и попасть в другой документ – то нужно использовать, так называемы ссылки. Вот текст вместе с поддержкой таких ссылок и есть гипертекст.

Пример HTML документа

Мы уже выяснили, что HTML документ это обычный текстовый файл. Чтобы понять, что в текстовом документе есть некоторая дополнительная информация, нужно приложение (программа), которая «поймет», что в документе есть нечто большее. Такими программами являются браузеры. Браузеры есть на всех устройствах, во всех операционных системах. Есть даже специальные сборки Linux без графического интерфейса, только командная строка. Даже для этого случая есть консольный браузер. Браузеров огромное количество, вот лишь некоторая часть самых популярных:

  • Google Chrome,
  • Яндекс.Браузер,
  • Mozilla Firefox,
  • Opera,
  • K-Meleon,
  • Internet Explorer,
  • Safari,
  • SRWare Iron

Самые популярные браузеры

HTML документ — это обычный текстовый документ. Если его открыть текстовым редактором, то это текст, дополненный специальными маркерами разметки. Если его открыть браузером, то браузер уже понимает эти маркеры, и отображает текст без маркеров, но с форматированным текстом.
Вот пример самого элементарно документа в формате HTML. В последующих уроках мы разберем, что это всё означает. Сейчас наглядная демонстрация.
Возьмем небольшой текст – изречение Марка Твена: «Через двадцать лет вы будете сожалеть о том, чего не сделали, чем о том, что вы сделали. Поэтому, отбросьте сомнения. Уплывайте прочь от безопасной гавани. Поймайте попутный ветер своими парусами. Исследуйте. Мечтайте. Открывайте»
Вот так этот текст выглядит в текстовом редакторе:

Текст в текстовом редакторе

Вот так он станет выглядеть в текстовом редакторе, если преобразовать его в HTML:

HTML страница в текстовом редакторе

А вот так он выглядит в браузере, который понимает, что означают эти специальные маркеры:

Простейшая HTML страница

Как видите, везде присутствует один и тот же текст. Информация не меняется. Меняется только способ ее подачи.
На этом урок можно завершить. Если есть вопросы, замечания – пишите в комментариях, обязательно отвечу.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *