Изучаем программирование на примере игры Minecraft
Время, когда компьютерные игры считались пустой тратой времени, осталось позади. В наши дни игры развивают творческие способности и формируют навыки программирования. Взяв за основу одну из таких игр — Minecraft — программист и писатель Ян Гарланд создал увлекательное практическое пособие, которое поможет ребятам создать свой первый сайт.
Сегодня ваши дети просто играют в Minecraft и изучают основы написания кода, а в будущем станут крутыми профессионалами. Давайте поможем им сделать первые шаги в удивительном мире программирования. Предложите им прямо сейчас сесть за компьютер, и следовать инструкциям в этой статье. 20 минут — и первый сайт будет готов. Попробуем?
На старт
1. Открой текстовый редактор (блокнот, Word или TextEdit) и пропиши то, что видишь на картинке. Запомни, что программирование на языке HTML всегда начинается с этих строк:
<!DOCTYPE html>
<html>
Элемент DOCTYPE сообщает браузеру, какую версию языка HTML ты используешь при создании сайта. До выхода HTML5 эта строчка могла быть очень длинной. Теперь все намного проще и это отлично, ведь такая строка должна быть в начале каждой страницы сайта! Давай пропишем элемент DOCTYPE прямо сейчас.
2. Видишь текст, заключенный между угловыми скобками? Это html-элемент.
Чтобы закрыть почти любой html-элемент, его печатают снова, но с косой чертой перед первой буквой. Html-элементы состоят из открывающего и закрывающего тегов.
Итак, мы открыли раздел html-документа с помощью открывающего тега элемента html. Теперь мы должны закрыть раздел с помощью закрывающего тега элемента html внизу страницы так, как показано на рисунке:
<head>
3. У страницы должны появиться голова и тело. Напечатай под тегом <html>:
<html>
<head>
</head>
<body>
</body>
</html>
«Голову» (все, что будет содержаться между тегами <head> и </head>) мы наполним информацией о веб-странице. А в тело (все, что будет содержаться между тегами <body> и </body>) поместим то, чем хотим делиться на нашем сайте. Пора заполнить нашу страницу!
4. Добавим элементы div в тело нашего документа.
Элемент div служит контейнером, в который можно поместить другие объекты. Нам понадобится несколько таких контейнеров, так что добавим два элемента div после открывающего тега <body>. Обязательно добавь закрывающие теги </div>.
Теперь щелкни мышкой перед тегом <div> и нажми клавишу Tab.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = 'topbar'>
</div>
<div id = 'mainsection'>
</div>
</body>
</html>
Заметил, как текст сдвинулся вправо? Программисты делают это для того, чтобы можно было легко увидеть структуру и содержимое других элементов. Элементы div, помещенные в «тело» нашего сайта (элемент body), должны быть немного сдвинуты вправо.
Также мы добавили атрибут id — идентификатор — в каждый тег. Позже ты поймешь, для чего мы это сделали. Обрати внимание: важно случайно не добавить пробел!
Внимание!
5. Наши контейнеры готовы. Пора заполнить их.
В контейнер div помещаем элементы p. Они заполняют сайт текстом и разделяют его на абзацы. Текст в каждом p автоматически начинается с новой строки. Текст легче читать, если он разделен на абзацы. Прочитай вопросы между элементами p, и введи свои ответы в каждой строчке перед закрывающим тегом </p>.
6. Открой меню «файл» в левом верхнем углу окна, выбери команду «сохранить как». Самое время присвоить имя твоей странице. Поскольку мы работаем над главной страницей будущего сайта, назовем ее index. Создай папку, в которую сохранишь последующие файлы. Тогда ты легко найдешь их в нужный момент. Если в открытом окне «сохранить как» тебе предлагают выбрать тип файла, выбирай вариант html или Hyper Text Markup Language.
Если же такую команду ты найти не можешь, выбери вариант «все файлы», а в конце имени файла укажи расширение. html. Готово! Нажми кнопку «сохранить».
Марш!
7. Готов посмотреть, что мы создали? Найди только что сохраненный html-файл и щелкни по нему.
Откроется созданная твоими руками страница сайта Стива! Выглядит неплохо, но пустовато, не так ли? Давай добавим картинку!
8. Открой любимую программу для рисования и нарисуй портрет Стива.
Избавься от белых полей вокруг рисунка, иначе картинка будет окружена белым на веб-странице. Сделать это тебе поможет команда «обрезать». Выдели область рисунка, постарайся включить в область выделения весь рисунок без лишних белых участков.
Как только ты закончишь, выбери команду «сохранить». Назови файл с Steve. jpg. Убедись, что в раскрывающемся списке «тип файла» выбран вариант jpeg. Файл сохрани в ту же папку, где сохранял документ html ранее.
9. Самое время вернуться в текстовый редактор, чтобы после первого тега <div> ввести следующее:
<img id = 'steve' src = 'steve.jpg'/>
Видишь, мы присвоили рисунку идентификатор id? Он пригодится нам позже, когда мы решим изменить расположение или размер рисунка. Атрибут src позволит веб-странице безошибочно определить, где находится нужный рисунок. Особенность элементов img в том, что закрыть их можно более простым способом — с помощью символов />. Но если тебе так удобнее, воспользуйся привычным закрывающим тегом </img>. Перезагрузи сайт, чтобы появился рисунок.
Поздравляем! Ты проделал большую работу и создал свой первый сайт! Но до финиша еще далеко. Узнай, как улучшить внешний вид сайта, сочинить игру, запрограммировать движение и добавить аудиоэффекты из полезной книги «Изучаем программирование на примере Minecraft».