Category: it

default

Быстрое введение в язык JavaScript

Чему вы научитесь, прочитав это введение?

Текст, как видите, очень короткий - всего на одну длинную страницу.

Но он уже позволит вам понять и проверить на практике некоторые простые принципы написания программ на языке JavaScript.

А более сложные программы - это, в большинстве случаев просто хорошо подобранное сочетание простых кусочков.

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


Лирическое введение

JavaScript - это язык программирования.
JavaScript подходит для любых задач.
JavaScript чаще всего сейчас используется для "оживления" страниц интернет-сайтов.
JavaScript один из самых простых и понятных языков программирования.
JavaScript сделает вас счастливыми.


Техническое предупреждение

Во всех языках программирования важно строго соблюдать синтаксис.
Это значит, что в программировании любая опечатка может изменить работу программы, а зачастую приводит к неработоспособности программы.
Поэтому нужно быть внимательными ко всем пробелам, точкам, запятым, кавычкам и написанию слов-команд (в том числе, и к большим-маленьким буквам в словах).
Хорошая новость в том, что все эти правила написания команд достаточно простые.


Для чего можно использовать JavaScript на вашем сайте

JavaScript можно использовать, например, для:
- Проверки заполнения форм до того, как они будут отправлены на сервер;
- Изменение цветов, размеров, положения элементов на странице;
- Создания анимационных эффектов (это "продвинутый" вариант предыдущего пункта);
- Отправки запросов на сервер и получение ответов (и, возможно, изменение частей страницы в соответствии с полученным ответом) без перехода на другую страницу (это так популярный сейчас AJAX);

Все эти действия, будучи скомбинированными в различных сочетаниях, позволяют сделать работу с вашим сайтом очень удобной и привлекательной.


Запомните одну важную вещь

После каждой команды в JavaScript нужно ставить точку с запятой:

document.write("Hello");
alert("Hello");


Самый простой вариант HTML-страницы с использованием JavaScript

Чтобы заставить заработать программу на языке JavaScript, достаточно написать вот такую "болванку" внутри файла с расширением .html и открыть этот файл в браузере (Internet Explorer, Mozilla, Opera...)

<html>
<head>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

А потом вставить между <script ...> и </script> текст программы.

Например, вывести сообщение в окошке:

alert("Это моё сообщение");

То есть, всё вместе будет выглядеть так:

<html>
<head>
</head>
<body>
<script type="text/javascript">
alert("Это моё сообщение");
</script>
</body>
</html>

Попробуйте прямо сейчас.

Чтобы упростить вам задачу, я написал небольшую программу, которая позволит вам проверять ваши программы на JavaScript прямо в браузере:

http://easysite-school.com/tools/js-tester/

- просто введите текст программы в форму на странице, и увидите результат в поле, находящемся чуть выше формы.


Как вывести пользователю навязчивое сообщение

Знаете, иногда на сайтах вылезают такие окошки с каким-нибудь сообщением вроде "Подтвердите, что вы человек!" и кнопка "ОК", причём с сайтом невозможно ничего сделать, пока эту кнопку "ОК" не щёлкнешь?

Вот такие окошки выводятся в JavaScript очень просто.

Поэтому их так часто и делают, что это очень просто:

alert("А вот и я!");



Как показать пользователю ненавязчивое сообщение

Например, вывести это сообщение внутрь какого-нибудь блочка на странице.

Допустим, у вас есть абзац на странице и внутри этого абзаца специальное место для сообщения:

<p>Сообщение: <strong id="myMessage"></strong></p>

А вот то, что выполнится при щелчке на эту ссылку, изменить сообщение внутри тега STRONG выше.

<p><a href="javascript:document.getElementById('myMessage').innerHTML = 'А вот и снова я, но вежливее!';">Щёлкни, а?</a></p>

Это гораздо более вежливый вариант общения с пользователем, чем простой alert().


Как обратиться к любому элементу на странице

Вот так и обратиться:

document.getElementById('elementId');

Естественно, вместо "elementId" нужно подставить идентификатор того элемента, к которому вы хотите обратиться.

Напоминаю, что идентификатор - это то, что задаётся атрибутом id="" у любого тега.

Например,

<div id="superDiv">Это супер-div! :-)</div>

Как изменить HTML-код внутри элемента страницы

document.getElementById('здесьИдентификаторЭлемента').innerHTML = "И здесь впишите тот HTML, который вы хотели бы вставить внутрь элемента";

Обработчики событий

С каждым элементом страницы могут происходить какие-то события.
Мало того, они постоянно происходят.
Например, наведение указателя мышки на элемент (onmouseover); или наоборот, уведение мышки с поверхности элемента (onmouseout); или щелчок мышью по элементу (onclick).
Эти события очень легко использовать.
Достаточно указать в HTML-коде элемента, при каком событии и что вы хотите сделать.
Например, у вас есть вот такой абзац на странице:

<p>Щёлкни меня!</p>

Сделаем так, чтобы по щелчку мыши по этому тексту выводилось сообщение во всплывающем окне:

<p onclick="alert('Щёлкнули!');">Щёлкни меня!</p>

А теперь добавим изменение текста внутри абзаца при наведении.

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';">Щёлкни меня!</p>

...и изменение текста внутри абзаца при убирании мышки с этого абзаца:

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';" onmouseout="this.innerHTML = 'Ну, вот, увели мышку :-(';">Щёлкни меня!</p>


Почему разные кавычки?

Всё очень просто.
Внутри двойных кавычек нельзя использовать двойные, а внутри одинарных нельзя использовать одинарные.
Потому что, если какая-то часть команды начинается, например, с двойных кавычек, то JavaScript будет "думать", что на двойной кавычке эта команда и заканчивается.
Поэтому когда вам внутри одной команды нужно использовать строку в кавычках, вы просто пишите другие кавычки (одинарные - внутри двойных, и наоборот, - двойные внутри одинарных).


Как быстро найти место ошибки в программе

Иногда программа перестаёт работать по непонятной или не до конца понятной причине. Часто главной проблемой является найти место, где именно произошла ошибка. Это место легко найти, если вставлять вот такую команду:

alert(5);

(она просто выводит цифру 5 во всплывающем окне) в разные места программы и смотреть - повторилась ли ошибка до или после появления сообщения "5".

Соответственно, ошибка происходит выше или ниже по тексту программы, чем вы вставили эту команду, выводящую пятёрку.



Как использовать переменные

Переменная - это что-то вроде коробки, на которой написано её название.
Внутри коробки может быть что угодно, но наклеенный "ярлычок" всегда остаётся одним и тем же.
Хорошо, когда наклейка на коробке-переменной соответствует типу тех вещей, которые в эту коробку обычно складывают.
То есть, если на коробке-переменной написано "фрукт", то внутри будет яблоко, груша или персик, но не будет огурцов и картошки.
А если название переменной "бумаги", то там может лежать один листик или же целая пачка разнообразных бумажек, а может и ничего не лежать (и такое бывает). Но если что-то лежит, то обязательно - бумага.

Переменную в JavaScript создать легко.

Достаточно написать в любом месте:

var имяПеременной;

(вместо имяПеременной соответственно подставляете название, которое вам больше нравится).

Имя переменной должно состоять только из английских букв и цифр. На самом деле, там можно использовать и некоторые другие символы, но зачем вам сейчас забивать этим голову?

Чтобы "положить" какое-то значение внутрь переменной, нужно написать знак равенства:

имяПеременной = значениеПеременной;

Например,

var myNumber;
myNumber = 17;
var myText;
myText = "Я люблю JavaScript!";


Зачем вообще нужны переменные?

Например, чтобы можно было использовать одно и то же значение несколько раз:

var myText;
myText = "Это достаточно длинное сообщение, и чтобы набрать его два раза в программе, нужно потратить драгоценное время";
alert(myText);
alert(myText);

Как видите, набрать сообщение пришлось всего один раз, хотя вывели во всплывающем окне мы его дважды.


Как видите, статья получилась немного сумбурная :-) Но именно такой я её и задумывал - дать вам вводную информацию и потом дополнить её на основе тех вопросов, которые у вас появятся.

Я планирую написать продолжение для этой статьи.

Но для этого мне нужно знать, что вы ещё хотите узнать по JavaScript.

Задавайте вопросы в комментариях.
default

Простой способ проверить, подключилась ли внешняя таблица стилей.

Когда вы используете отдельный файл с правилами CSS, но пока не успели там ничего написать :-), вы можете быстро проверить, работают ли правила из внешнего файла вообще.

Для этого достаточно в подключенном файле CSS написать примерно следующее:

BODY {
         background-color: red;
         }

- если после этого цвет страницы поменяется на красный, значит, правила работают.


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

default

Расширенный, углублённый и улучшенный курс по созданию сайтов. :-) Хотите?


Как Быстро Научиться Делать Сайты В Интернете?



Набор в группу закрыт.


Вы думаете, что сайты делать сложно? На самом деле, это проще, чем кажется на первый взгляд. Главное знать, что именно изучить, чтобы получить качественный результат при минимальных усилиях.

Из моего курса вы узнаете, что нужно учить на самом деле, увидите и попробуете, получите ответы на все ваши вопросы и получите возможность закрепить знания на практике.

И при этом избавитесь от необходимости тратить месяцы на изучение кучи книг, документации и статей.

Вы научитесь делать технически грамотные сайты самым удобным для вас способом.



Записываясь на этот курс, вы получаете сразу два курса - расширенный базовый курс по HTML (структуре документов) и введение в CSS (управление внешним видом страниц).

HTML - это язык разметки интернет-страниц. Ни один сайт не обходится без использования HTML - любая страница состоит из HTML, дополненного картинками, таблицами стилей и, возможно, анимационными элементами. HTML сам по себе задаёт структуру страницы, не особо заботясь о внешнем виде.

А вот CSS уже позволяет изменять внешний вид отдельных HTML-элементов, делать их разноцветными, управлять шрифтами, размерами, цветом фона, рамками и так далее. Кроме того, CSS позволяют сократить объём работы, потому что один набор правил можно использовать во многих HTML-документах сразу.

В этом курсе вы научитесь пользоваться связкой HTML+CSS и создавать небольшие простые сайты быстро и качественно.

 
Отзыв о прошлом моём курсе: огромное спасибо за проведенный курс! вы - замечательный преподаватель, с замечательной же обратной связью! интересно, доступно и терпеливо нам все разжевываете :)

 
Вы научитесь создавать страницы, объединять их группы; планировать сайт, чтобы сайт удобно было изменять; сэкономите ваше время засчёт уменьшения объёмов работы, научитесь управлять внешним видом элементов страниц, собирать это всё воедино, получая в итоге работающий сайт.
 

Вы достигните результата гораздо быстрее, чем по книгам

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

Вы получите только то, что на самом деле нужно знать для создания сайтов.


Отзыв о прошлом моём курсе: Спасибо за проведенный курс! До него мне создание сайта казалось "темным лесом", а в нем оказывается достаточно все светло и прозрачно. С удовольствием продолжу с Вами обучение дальше.



В каком виде будет проходить обучение
  • В отдельной закрытой группе в ЖЖ для участников курса.
  • Раз в несколько дней вы будете получать очередной урок.
  • Уроки будут в виде записей в живом журнале.
  • К каждому из уроков будет домашнее задание, с помощью которого вы сможете закрепить полученные знания.
  • Примерно раз в неделю (на каждые два-три урока) будет более объёмное задание на закрепление всего изученного ранее - потому что на практике вам проще будет понять и запомнить материал.
  • Всё что вам нужно будет - это выполнять практические задания для закрепления навыков.
  • Я буду разбирать ваши домашние задания, давать персональные советы и отвечать на все ваши вопросы.

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

Чем ближе к реальности будет ваша цель, тем лучше - за время прохождения курса вы сможете сделать сайт своей фирмы или свой персональный сайт.

Таким образом, в результате прохождения курса вы получите и знания, и реальный результат, который можно "пощупать".

Варианты сайта, который вы можете делать в процессе изучения курса:
  • cайт-домашняя страничка о вас лично
  • сайт-портфолио
  • сайт вашей фирмы (хороший способ сэкономить)
  • сайт о своём увлечении (например, выращивание цветов или собирание марок)
  • ваш вариант?


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

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

 




Условия, сроки и стоимость участия

Начало курса 3 апреля.

Курс будет идти 1 месяц. Стоимость участия 3000 рублей.

Внимание! Для тех, кто поторопился, действовали СКИДКИ.
  • до 28 марта вы сможете участвовать всего за 2000 рублей.
  • 29 марта цена поднимется до 2500 рублей.
  • 1 апреля цена поднимается до полной величины - 3000 рублей.
Вам нужно перечислить эту сумму через систему электронных платежей Webmoney в рублях - на кошелёк R224715878019

Обязательно укажите ваше имя пользователя в ЖЖ и название курса ("HTML+CSS") в примечании к переводу Webmoney.


Если у вас ещё нет кошелька в системе вебмани - самое время его завести, на сайте http://webmoney.ru/ всё подробно описано, регистрация занимает несколько минут, пополнить кошелёк можно различными способами.


Также вы можете оплатить обучение Яндекс.Деньгами.


После оплаты напишите комментарий к этой моей записи, и я добавлю вас в закрытую группу.

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

http://easysite.livejournal.com/19120.html





Курс начался. Набор в группу закрыт.



Дополнительно:

Добавьте меня в друзья в ЖЖ - так вы сможете быстро узнавать о новых уроках курса).

Напишите у себя в ЖЖ, что участвуете в курсе по созданию сайтов, со ссылкой на эту мою запись. Например, в таком виде:
 
Я участвую в курсе по созданию сайтов.
-
http://easysite.livejournal.com/18597.html







100% Гарантия

Если в течение двух недель после начала курса вы решите, что он вам не подходит, - сообщите мне об этом, и я верну вам всю оплаченную сумму без лишних вопросов.

После возврата вы лишаетесь права участия в последующих моих курсах - зачем испытывать судьбу ещё раз, если мы друг другу не подходим, верно?




Начало курса 3 апреля. Набор в группу закончен.

Повторять этот курс в ближайшее время я не буду. Если вы всё ещё думаете, записаться вам или нет - записывайтесь, другая такая возможность появится нескоро.





Ответы на вопросы

Задания будут теоретические или практические?

Будет больше практики. Вы же хотите уметь делать, а не "знать, как умеют другие"? :-) Теорию я тоже буду давать - в том объёме, который нужен для выполнения практических заданий.


Почему целый месяц?

Я мог бы дать эти знания и быстрее (просто взять деньги, рассказать теорию и попрощаться), но вам ведь нужен хороший результат?

Поэтому важно, чтобы у вас было время на выполнение практических заданий и время задать вопросы и получить ответы.



Скажите, а будет ли повторяться базовый курс по HTML?

В ближайшее время я не планирую повторение базового курса по HTML, но все участники совмещённого курса по HTML + CSS получат уроки базового курса бесплатно.



Можно ли будет получать уведомления о новых уроках курса на электронную почту?

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



А что если я уеду в командировку/заболею - будете ли вы проверять мои домашние задания?

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



У меня есть Яндекс.Деньги, но нет Webmoney. Как мне оплатить?

http://roboxchange.com/SelectPair.aspx - вот здесь вы можете обменять Яндекс.Деньги на вебмани (WMR).

Теперь можно оплатить и Яндекс.Деньгами - спрашивайте в комментариях, я вышлю вам реквизиты для оплаты.



У меня есть только PayPal. Как мне оплатить?

PayPal не позволяет напрямую оплачивать товары и услуги в России и СНГ.

Одна из участниц курса поделилась способом перевода PayPal в Webmoney:


 
давайте я поделюсь со всеми своим способом оплаты из Европы, может кому-нибудь понадобится :)
Сначала я купила paysafecard они продаются практически во всех странах Европы.
http://www.paysafecard.com/
Потом нужно зарегистрироваться на вебмани. Версия не ниже classic, при этом обязательно заполнить формальный аттестат.
Потом идти сюда
http://top-up.wmtransfer.com/index.aspx
и платить. Вот вроде все. Paysafe забирает чуть более трех процентов.
По мне так самый простой способ

В качестве альтернативного варианта вы можете договориться с кем-то из своих знакомых в России, чтобы они оплатили ваше участие в курсе через Webmoney или Яндекс.Деньги.


Я уже опытный разработчик сайтов, у меня есть знакомый, которому я хочу порекомендовать ваш курс. Не могли бы вы показать мне пример того, что вы умеете делать, чтобы я мог оценить ваш технический уровень?

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



Что вы понимаете под "технически грамотными сайтами"?

Под технической грамотностью в рамках HTML/CSS я понимаю примерно то же, что и вы - валидность, семантику, разделение структуры и оформления.

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


Что делать, если я ещё совсем не знаю HTML?

Всё предусмотрено. В начале курса вы получите материалы моего прошлого курса (введения в HTML) - по этим материалам под моим рководством за 1-2 дня вы легко освоите основные принципы, и сможете приступить к основной части курса.




Не нашли ответа на свой вопрос? Задайте его в комментариях к этой записи - я с удовольствием на него отвечу.
 




Начало курса 3 апреля. Набор в группу закончен.


P.S.: Участники курса получают скидки на участие в моих будущих курсах.

P.P.S.: Даже после окончания курса вы продолжаете получать новые знания.

P.P.P.S.: Где ещё вы получите эти знания и столько внимания к вам лично так дёшево?
default

Форматы изображений для интернета.

Для сохранения и обработки изображений на компьютере придумано очень много (несколько десятков как минимум) форматов.

Но всего несколько из них хорошо подходят для использования на сайтах. По разным причинам.

Вот те форматы, которые на сайте можно и нужно использовать:
  • JPEG - очень хорошо подходит для сохранения фотографий - позволяет очень сильно уменьшить размер изображения (в байтах, килобайтах, мегабайтах), сохранив внешний вид практически неизменным.
  • GIF - хорош для сохранения разнообразных графиков, схем, возможно текста. В общем, хорошо подходит для тех случаев, когда на картинке мало цветов (включая оттенки), и этими цветами закрашены большие области. Идеально подойдёт для сохранения чистого белого листа :-) Ещё одна особенность GIF - он позволяет сделать некоторые участки картинки прозрачными, то есть, через картинку будет видно то, что находится под ней - цвет фона или другая картинка, например.
  • PNG - это "продвинутая версия" формата GIF - она лучше сжимает (в смысле, уменьшает размер в байтах) изображения со сложными однотонными рисунками. При это PNG позволяет сохранять изображения, в которых гораздо больше цветов и оттенков (в общем-то, можно сохранить и фотографию - эффект будет почти такой же, как в JPEG). PNG тоже позволяет сделать прозрачными некоторые участки изображения, причём в отличии от GIF, позволяет делать полупрозрачность. В общем случае, если вы сохраняете что-то, для чего подходят и GIF и PNG, выбирайте PNG. :-)

Когда выбираете формат для вашего изображения, смотреть нужно на два параметра:
  • Какой будет размер изображения в килобайтах (чем меньше - тем лучше для интернета, файлы маленького объёма быстрее загружаются). Это лучше всего проверяется на практике - просто попробуйте сохранить в разных форматах одну и ту же картинку.
  • Хорошо ли выглядит изображение после сохранения? Определяйте на глаз - если вас устраивает то, как выглядит картинка, значит, выбранный вами для этой картинки формат подходит для неё.

Дополнение (от 2009-02-20): Ещё одна особенность формата GIF - поддержка анимации (то есть, изображение может содержать несколько кадров, сменяющих друг друга как в фильме).

default

Переводы названий тегов на русский язык.

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



<head></head> - "head" (произносится "хэд") по-английски "голова". Голова находится в верхней части человечка <html></html> :-)

<body></body> - "body" (произносится "бади") по-английски "тело", "туловище". Туловище находится в нижней части человечка <html></html> :-)

Ног у этого человечка нет. :-) Не повезло.

<title></title> - "title" по-английски "заголовок", титул (произносится как "тайтл"). В данном случае это заголовок окна. Титул написан на лбу у этого человечка, прямо посередине головы <head></head> :-)


<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> - все этих хэ-хэ-хэ на самом деле сокращения от английского слова "heading" (произносится как "хэдинг", тоже с головой немного общего - корень "head"). "heading" означает "заглавие", тоже заголовок, только не окна, а книги, главы, подглавы, раздела. Цифры после буквы "h" означают степень значимости этого заголовка - чем меньше цифра, тем главнее заголовок. h1 самый главный на странице. Кстати, произносить их удобно как "аш один", "аш два", "аш три", "аш четыре", "аш пять", "аш шесть".

<p></p> - тоже сокращение, на этот раз от английского слова "paragraph" (абзац, параграф - в значении "блок текста, отделённый от соседних блоков переносами строк").

<em></em> - угадайте, что? Ещё одно сокращение. :-) Полное слово - "emphasis" (эмфаза, логическое ударение, акцент).

<strong></strong> - "strong" переводится на русский как "сильный", "энергичный", "решительный". А по версии стандарта является "более сильной эмфазой", "более сильным акцентом" - "stronger emphasis" ("stronger" означает "сильнее"). Это такое "я подчёркиваю, это важный момент!".



Список уроков базового курса здесь:

http://easysite.livejournal.com/5739.html

default

Я составил список заметок, которые я написал раньше в этом журнале.

Я добавил к записи с оглавлением курса по HTML список своих заметок про HTML и создание сайтов.

http://easysite.livejournal.com/5739.html

Настоятельно рекомендую прочитать эти заметки всем участникам группы по HTML.

default

Чем сайт отличается от обычной кучки файлов.

Простой сайт - это, с технической точки зрения, группа файлов где-то на сервере (компьютере, подключенном к интернет).

Но у сайта есть несколько важных отличительных особенностей:
  • Основу сайта составляют HTML-документы (а все остальные файлы сайта показываются внутри HTML-документов или же доступны по ссылкам из HTML-документов).
  • Файлы сайта указывают друг на друга (с помощью ссылок) таким образом, что зайдя на главную страницу сайта вы по ссылкам (переходя с одной страницы сайта на другую) можете добраться до любой страницы или скачиваемого файла этого сайта.
  • Сайт предназначен для просмотра через браузер (Internet Explorer, Mozilla, Opera, Safari...) - и браузера достаточно для просмотра сайта, благодаря ссылкам.
  • У сайта есть постоянный адрес в интернете (который вы всегда можете набрать в адресной строке вашего браузера, чтобы снова увидеть этот сайт)

default

Главная польза HTML - в возможности создавать связи.

Когда мы смотрим на современные интернет-сайты, мы видим какие-то картинки, яркие цвета, возможно, какие-то вставленные в HTML шевелящиеся объекты, и многие думают, что предназначение HTML - делать именно это, создавать красоту.

На самом же деле основная идея HTML - возможность описывать связи между различными страницами и файлами в интернете. То есть, ключевой особенностью HTML является возможность создавать ссылки на другие документы, создавать гипертекст.

Что такое гипертекст? По сути, это просто текст, в котором есть активные ссылки на другие документы. Именно наличие ссылки, по которой можно щёлкнуть и тут же попасть на связанный документ, делает обычный текст Гипер.

Это заложено и в самом названии HTML (HyperText Markup Language - язык разметки гипертекста).

Первые версии стандарта HTML вообще содержали очень мало элементов - буквально заголовки, абзацы и ссылки. Этого было достаточно для того, чтобы создать гипертекстовую среду.

Чтобы вы более наглядно почувствовали пользу от гипертекста, я проведу аналогию с книгой. Представьте, что вы читаете бумажную книгу. В какой-то момент вам посреди текста попадается цитата "Нельзя ли прибавить мне несколько  слов  о  предмете,  о  котором,  как принято всеми думать, говорят обычно пространно и скучно, - о себе?" (Джордж Гордон Байрон, "Корсар"). И допустим, вас очень сильно заинтересовала цитата, и вы захотели прочитать произведение полностью и узнать, кто же такой Байрон. :-)

Что делаете вы в случае с бумажной книгой? Идёте в библиотеку или книжный магазин, или к подруге, берёте книгу (или две - одну с произведениями Байрона, а вторую - энциклопедию с его биографией), читаете. Довольно утомительная процедура, неправда ли?

Что происходит в случае с гипертекстом? А вот что:

"Нельзя ли прибавить мне несколько  слов  о  предмете,  о  котором,  как принято всеми думать, говорят обычно пространно и скучно, - о себе?" (Джордж Гордон Байрон, "Корсар").

Гипертекст в действии. Вам достаточно щёлкнуть по имени-фамилии, чтобы узнать про Байрона, и щёлкнуть по названию "Корсар", чтобы прочитать само произведение.