7 янв. 2015 г.

HTML

Пришло время немного отвлечься от программирования и узнать подробнее, как создать визуальное представление игры. Существует несколько инструментов для создания графики в играх. Для JS самый простой и родной инструмент — это HTML, язык гипертекстовой разметки, на котором делают сайты.

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

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

<a>...</a> — создает ссылку на другой сайт;
<button>...</button> — создает кнопку.

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

Часто используются теги:
 <script>...</script> — создает область для написания программы;
<span>...</span> — ничего не делает, просто обрамляет текст;
<div>...</div> — создает оболочку для блоков, но оформление не меняет.

Большинство элементов создается двумя тегами: открывающим и закрывающим. Но некоторые теги — одинарные. Их закрывать не нужно. Например, <hr> создает горизонтальную линию, а <img> создает картинку (только надо в src указать адрес картинки <img src="kartinka.jpg">).

Обычный HTML-документ имеет главные теги, внутри которых расположены все остальные:


<html>
<!-- html - это самый главный контейнер -->
 <head>
 <!-- head - переводится “голова”, тут хранится информация о документе, но пока он пуст -->
 </head>
 <body>
 <!-- body переводится “тело”, тут располагается основное содержание: html-элементы, стили и программы -->
   ...
 </body>
</html>

Троеточие расположено там, где пишут весь остальной html-код (в “теле”). Но эта структура документа не обязательна для маленьких примеров и поначалу ее можно не использовать. Однако, пока не будем использовать и русский текст — без указания кодировки (в теге <head>) вместо русских букв будут показаны кракозяблики.



Чтобы настроить внешний вид (стиль) HTML-элементов, используется свойство style. Например стиль style="color: red;" делает цвет текста (color) красным (red). В style через разделитель ; указывется как должен выглядеть элемент, это и есть CSS-стили.

Часто используются такие свойства стилей:
font-size — размер текста, например font-size: 18px
background — фон, например background: gray (серый фон элемента)

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

Пример — текст в оболочке span делаем красным:
<span style="color: red">krasniy tekst</span>

Напоминание:
Красным цветом выделены программы (код JavaScript)
Желтым — коды оформления элементов (стилей CSS)
Зеленым цветом — разметка элементов HTML

Следующий урок >>

5 комментариев:

  1. span...span — ничего не делает, просто обрамляет текст;

    что значит обрамляет

    ОтветитьУдалить
    Ответы
    1. span без дополнительных стилей просто обозначает начало и конец текста. То есть, он не меняет внешний вид.

      Можно провести такую аналогию:
      div - как коробка, занимает много места и обозначает отдельный блок
      span - как прозрачный пакет, он тоже упаковывает но не меняет форму и внешний вид

      Повторюсь, с помощью css-стилей это все кардинально меняется - можно сделать div строчным, а span блочным.

      Удалить
    2. Почему в style после red есть ; а после спан стайл нету?

      Удалить
    3. Подразумевается, что после ; будут указаны и другие параметры, вроде font-size и background. А в примере они не используются, потому там нет ;

      Удалить
  2. Рекомендую канал школа программирования Пиксель
    ( https://www.youtube.com/channel/UCenaLQKkLwAUmxmwzV8fJjg )
    Мой ребенок увлекся после просмотра первого же видео.
    Всем советую!

    ОтветитьУдалить