24 июля 2020

Как помочь ребенку сделать свой первый сайт

Изучаем программирование на примере игры Minecraft

Время, когда компьютерные игры считались пустой тратой времени, осталось позади. В наши дни игры развивают творческие способности и формируют навыки программирования. Взяв за основу одну из таких игр — Minecraft — программист и писатель Ян Гарланд создал увлекательное практическое пособие, которое поможет ребятам создать свой первый сайт.

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

На старт

1. Открой текстовый редактор (блокнот, Word или TextEdit) и пропиши то, что видишь на картинке. Запомни, что программирование на языке HTML всегда начинается с этих строк:

Элемент DOCTYPE сообщает браузеру, какую версию языка HTML ты используешь при создании сайта. До выхода HTML5 эта строчка могла быть очень длинной. Теперь все намного проще и это отлично, ведь такая строка должна быть в начале каждой страницы сайта! Давай пропишем элемент DOCTYPE прямо сейчас.

2. Видишь текст, заключенный между угловыми скобками? Это html-элемент.

Чтобы закрыть почти любой html-элемент, его печатают снова, но с косой чертой перед первой буквой. Html-элементы состоят из открывающего и закрывающего тегов.

Итак, мы открыли раздел html-документа с помощью открывающего тега элемента html. Теперь мы должны закрыть раздел с помощью закрывающего тега элемента html внизу страницы так, как показано на рисунке:

3. У страницы должны появиться голова и тело. Напечатай под тегом :

«Голову» (все, что будет содержаться между тегами и ) мы наполним информацией о веб-странице. А в тело (все, что будет содержаться между тегами и ) поместим то, чем хотим делиться на нашем сайте. Пора заполнить нашу страницу!

4. Добавим элементы div в тело нашего документа.

Элемент div служит контейнером, в который можно поместить другие объекты. Нам понадобится несколько таких контейнеров, так что добавим два элемента div после открывающего тега . Обязательно добавь закрывающие теги .

Теперь щелкни мышкой перед тегом и нажми клавишу Tab.

Заметил, как текст сдвинулся вправо? Программисты делают это для того, чтобы можно было легко увидеть структуру и содержимое других элементов. Элементы div, помещенные в «тело» нашего сайта (элемент body), должны быть немного сдвинуты вправо.

Также мы добавили атрибут id — идентификатор — в каждый тег. Позже ты поймешь, для чего мы это сделали. Обрати внимание: важно случайно не добавить пробел!

Внимание!

5. Наши контейнеры готовы. Пора заполнить их.

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

6. Открой меню «файл» в левом верхнем углу окна, выбери команду «сохранить как».

 Самое время присвоить имя твоей странице. Поскольку мы работаем над главной страницей будущего сайта, назовем ее index. Создай папку, в которую сохранишь последующие файлы. Тогда ты легко найдешь их в нужный момент. Если в открытом окне «сохранить как» тебе предлагают выбрать тип файла, выбирай вариант html или Hyper Text Markup Language.

Если же такую команду ты найти не можешь, выбери вариант «все файлы», а в конце имени файла укажи расширение. html. Готово! Нажми кнопку «сохранить».

Марш!

7. Готов посмотреть, что мы создали? Найди только что сохраненный html-файл и щелкни по нему.

Откроется созданная твоими руками страница сайта Стива! Выглядит неплохо, но пустовато, не так ли? Давай добавим картинку!

8. Открой любимую программу для рисования и нарисуй портрет Стива.

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

Как только ты закончишь, выбери команду «сохранить». Назови файл с Steve. jpg. Убедись, что в раскрывающемся списке «тип файла» выбран вариант jpeg. Файл сохрани в ту же папку, где сохранял документ html ранее.

9. Самое время вернуться в текстовый редактор, чтобы после первого тега
ввести следующее:

Видишь, мы присвоили рисунку идентификатор id? Он пригодится нам позже, когда мы решим изменить расположение или размер рисунка. Атрибут src позволит веб-странице безошибочно определить, где находится нужный рисунок. Особенность элементов img в том, что закрыть их можно более простым способом — с помощью символов />. Но если тебе так удобнее, воспользуйся привычным закрывающим тегом . Перезагрузи сайт, чтобы появился рисунок.

Поздравляем! Ты проделал большую работу и создал свой первый сайт! Но до финиша еще далеко. Узнай, как улучшить внешний вид сайта, сочинить игру, запрограммировать движение и добавить аудиоэффекты из полезной книги «Изучаем программирование на примере Minecraft».

Расскажите всем, какую интересную статью вы нашли!

По материалам книг

Подписка

Узнай о новинках первым!