Пришло время немного отвлечься от программирования и узнать подробнее, как создать визуальное представление игры. Существует несколько инструментов для создания графики в играх. Для JS самый простой и родной инструмент — это HTML, язык гипертекстовой разметки, на котором делают сайты.
HTML — это специальный код для браузеров. В нем с помощью тегов указывается, что показать на странице: тексты, картинки, таблицы, видеоролики и другие элементы. Также в HTML вставляются куски программ или целые файлы программного кода.
Теги — это ключевые слова, которые создают стандартные элементы (со стандартными стилями). Теги также называют контейнерами, потому что внутри них могут быть другие теги или текст. Эти теги нам уже знакомы:
<a>...</a> — создает ссылку на другой сайт;
<button>...</button> — создает кнопку.
С некоторыми другими тегами мы еще познакомимся дальше. Для начала надо запомнить около десяти, их вполне хватит.
Часто используются теги:
<script>...</script> — создает область для написания программы;
<span>...</span> — ничего не делает, просто обрамляет текст;
<div>...</div> — создает оболочку для блоков, но оформление не меняет.
Большинство элементов создается двумя тегами: открывающим и закрывающим. Но некоторые теги — одинарные. Их закрывать не нужно. Например, <hr> создает горизонтальную линию, а <img> создает картинку (только надо в src указать адрес картинки <img src="kartinka.jpg">).
Обычный 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
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
span...span — ничего не делает, просто обрамляет текст;
ОтветитьУдалитьчто значит обрамляет
span без дополнительных стилей просто обозначает начало и конец текста. То есть, он не меняет внешний вид.
УдалитьМожно провести такую аналогию:
div - как коробка, занимает много места и обозначает отдельный блок
span - как прозрачный пакет, он тоже упаковывает но не меняет форму и внешний вид
Повторюсь, с помощью css-стилей это все кардинально меняется - можно сделать div строчным, а span блочным.
Почему в style после red есть ; а после спан стайл нету?
УдалитьПодразумевается, что после ; будут указаны и другие параметры, вроде font-size и background. А в примере они не используются, потому там нет ;
УдалитьРекомендую канал школа программирования Пиксель
ОтветитьУдалить( https://www.youtube.com/channel/UCenaLQKkLwAUmxmwzV8fJjg )
Мой ребенок увлекся после просмотра первого же видео.
Всем советую!