Урок 2. Что такое HTML язык?

Изучаем HTML

Урок 2. Что такое HTML язык?

Для простоты пониманию, приведу пример с китайским языком. Чтобы начать общаться с китайцами на их родном языке через интернет, например, через ВКонтакте, вам сначала нужно изучить китайский язык, потому что китайские иероглифы (знаки), например, такой «嗨» вы не поймете, а он, между прочем, означает слово «привет». Всего лишь один символ может заменять собой целое слово или команду для действия, например, беги - 運行, лежи -謊 и т.д.

То же самое и с HTML языком web-программирования, он нужен для общения с программами (например, браузерами) с помощью специальных символов (теги). Например, такое предложение «<b>Какой чудесный день</b>» браузер понимает следующим образом – покажи мне на экране текст «Какой чудесный день» жирным шрифтом. Т.е. во время общения на китайском языке мы используем специальные китайские иероглифы, а при общении с браузерами мы используем специальные программные символы (теги). Поэтому чтобы создать сайт нам необходимо изучить эти теги HTML языка.

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

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

От слов к делу. Вот код нашей страницы из предыдущего урока:

  1. <html>
  2.    <head>
  3.       <title>Мой собственный сайт</title>
  4.    </head>
  5.    <body>
  6.       Добро пожаловать на мой сайт
  7.       <br>
  8.       Здравствуй гость, ты находишься на моем любимом сайте. Будь как дома!
  9.    </body>
  10. </html>

Давайте посмотрим на нее глазами браузера:

<html> - начало документаОго, меня просят показать какой-то html документ
<head> - начало служебной информаций документа - (head - от англ. «голова»), при этом просят особое внимание уделить служебной информаций, которая пойдет ниже
<title> - начало названия документа - (title - от англ. «название»), меня просят показать название страницы, а где название то?
Мой собственный сайт - отображаемое название документа - ах вот где название страницы
</title> - конец названия документаи это все? Я думал название документа будет больше
</head> - конец служебной информаций документа- фух, наконец-то служебная информация закончена, можно и расслабиться
<body>начало тела документа(body - от англ. «тело»), а нет, просят что-то показать на экране монитора, но почему-то снова не говорят что
Добро пожаловать на мой сайт - содержимое тела - ах вот что вы просили показать на экране, и ради этого вы меня беспокоили?
<br> - команда «красная строка» - такс, а вот это уже интересно, а что вы от меня еще прячете?
Здравствуй гость, ты находишься на моем любимом сайте. Будь как дома! - содержимое тела - прикольно, прикольно, еще что надо показать?
</body>конец тела документа - и это все? Ради всего этого вы меня разбудили?
</html> - конец документа - фух, вот сейчас можно расслабиться и поспать

Для наглядности попробуйте изменить код, который отображается жирным шрифтом:

  1. <html>
  2.    <head>
  3.       <title>Мой собственный сайт</title>
  4.    </head>
  5.    <body>
  6.       Добро пожаловать на мой сайт
  7.       <br>
  8.       Здравствуй гость, ты находишься на моем любимом сайте. Будь как дома!
  9.    </body>
  10. </html>

Например, вот так:

  1. <html>
  2.    <head>
  3.       <title>Новое название сайта, который отображается сверху в браузере</title>
  4.    </head>
  5.    <body>
  6.       Добро пожаловать на мой сайт
  7.       <br>
  8.       Здравствуй гость, ты находишься на моем любимом сайте. Будь как дома!
  9.    </body>
  10. </html>

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

  1. <html>
  2.    <head>
  3.       <title>Новое название сайта, который отображается сверху в браузере</title>
  4.    </head>
  5.    <body>
  6.       Добро пожаловать на мой сайт
  7.       <br>
  8.       Здравствуй гость, ты находишься на моем любимом сайте. Будь как дома!
  9.    </body>
  10. </html>

Например, вот так:

  1. <html>
  2.    <head>
  3.       <title>Новое название сайта, который отображается сверху в браузере</title>
  4.    </head>
  5.    <body>
  6.       Содержимое сайта изменено!
  7.       <br>
  8.       Теперь вы видите новый текст.
  9.    </body>
  10. </html>

Ничего сложного неправдали? Обратите внимание, чтобы изменить название сайта мы изменили всего лишь текст внутри символов <title> ... </title>, а чтобы изменить содержимое сайта мы изменили текст внутри <body>...</body>, вот эти символы дают команду нашему браузеру - что и как отображать на экране наших мониторов, поэтому их называют - тегами.

Давайте более подробнее рассмотрим что они из себя представляют в уроке №3.

329
RSS
Нет комментариев. Ваш будет первым!
Загрузка...

Уважаемые гости и пользователи!

Сайт и имеющиеся в нем учебники находятся в процессе разработки, поэтому все предложения и найденные ошибки прошу сообщить администраций сайта по E-Mail (html@ruhtml.ru) или в ЛС.