Каждый сайт уникален и передает посетителю информацию, которую хочет сказать владелец. В статье пройдем урок от преподавателя школы программирования Pixel, расскажем про курс по созданию сайтов на языках разметки HTML и CSS, а также JavaScript для детей и о том, почему создание сайтов не перестает быть интересным.
Урок
Что такое HTML
HTML – это стандартизированный язык разметки документов в Интернете. Все веб-страницы строятся на его основе. Браузер при открытии сайта читает HTML-код и преобразует его в привычное для нас визуальное оформление. Код состоит из иерархии элементов, границы которых обозначаются открывающими и закрывающими тегами.
Есть и другие технологии, которые используются вместе с HTML. Для описания внешнего вида страницы используется CSS, а для назначения определенного поведения приходит на помощь JavaScript. С помощью перечисленных технологий можно создать свою веб-страницу, от простого фото-портфолио до собственного интернет-магазина.
Установка текстового редактора Brackets
В наших уроках веб-программирования мы тебя научим всему самому необходимому для того, чтобы создать свою веб-страницу с дизайном на твой вкус и даже опубликовать ее в интернете. Если тебя заинтересовало, тогда нужно подготовить необходимые инструменты, чтобы начать быть веб-программистом. Мы будем программировать в текстовом редакторе Brackets.
Brackets – это текстовый редактор для веб-разработчиков, ориентированный на работу с HTML, CSS и JavaScript. Для того, чтобы начать урок веб-программирования, нам необходимо скачать текстовый редактор Brackets.
Зайдем в браузер. В любом поисковике набираем Brackets, нажимаем Enter и видим сайт Brackets.io, кликаем на него. Далее нажимаем на кнопку Download Brackets и ждем, когда редактор скачается. Потом заходим в папку Компьютер, кликаем на папку Загрузки, и видим наш установщик в 3д разработке. Чтобы начать установку, кликнем по файлу два раза. Путь установки можно выбрать по умолчанию. Также по умолчанию у нас стоят галочки слева от двух опций. Мы их оставим и нажимаем Next. Затем начнем установку нашего продукта и после завершения процесса нажимаем Finish. Закрываем окно загрузки. (2:11) Найдем Brackets с помощью поиска Windows, видим, что поиск прошел успешно. Кликаем на программу правой кнопкой мыши и нажимаем пункт Перейти к расположению файла. Открывается окно, и в нем сразу выделена наша среда разработки. Перетаскиваем ее на рабочий стол, в любое удобное для место.
Создание страницы
Настало время создать нашу первую страницу. Дважды кликаем на Brackets.
На светлом фоне у нас расположено окно редактора кода, а слева, на темном фоне, открыты файлы и папка проекта. Пока папки с нашим проектом не существует, давайте ее создадим. Для этого перейдем в навигационное меню сверху и наведем на файл. На третьей строчке мы увидим пункт Открыть директорию и кликнем на него. Появится окно под названием Выбрать директорию. В ней нам необходимо перейти на рабочий стол и создать папку с названием нашего проекта. Назовем наш проект Project. Рекомендуем называть проект английскими буквами. В названии проекта допускаются и цифры, но их не нужно ставить первыми. Кликаем на папку нашего проекта два раза, нажимаем на кнопку Выбор папки. Наша директория готова к работе. Кликаем по темной части экрана правой кнопкой мыши и в контекстном окне выбираем пункт Новая директория. Называем ее Lesson1. Затем кликаем правой кнопкой мыши на Lesson1. Выбираем пункт Новый файл, называем его индекс.html. Мы будем всегда называть свою страницу именно так. Это специальное расширение файла, для написания в нем html кода.
Написание кода
Свое написание кода мы начинаем с тега html. Это самый главный тег, в котором будут содержаться все элементы нашей страницы. Внутри данного тега поместим еще два важнейших тега. Первый называется head.
После тега head пишем тег body, который содержит всю информацию, находящуюся на нашей странице. Тег head тоже будет кое-что отображать. А именно, название нашей страницы. Но для этого в него нужно поместить тег title. Вот и почти готово. Напишем между тегами title надпись «Моя первая страница».
Теперь перейдем в тег body. Между этими тегами создадим еще один тег, который будет служить заголовком нашей первой страницы. Его название h1. Между заголовочными тегами напишем фразу «Привет, мир!». С этой фразы начинается путь любого программиста.
Можно написать и hello world. Не забываем сохранять наш проект перед тем, как смотреть на результат. Что получилось в итоге, мы можем узнать с помощью специальной кнопки, на которой изображена молния. После ее нажатия появится еще одно браузерное окно, показывающее нам все содержимое на странице.
Вы можете заметить, что у нашей страницы есть название и содержание в виде заголовка.
Выделим весь наш код и удалим его. Напишем еще один, но гораздо быстрее. Для этого установим специальное расширение, которое будет служить нам помощником на протяжении всех уроков. Нашего помощника зовут Эмит, и мы найдем его в специальной вкладке расширения. Под кнопкой молнии есть еще одна кнопка, похожая на аккумулятор, нажмем на нее. Появится окно. Справа вверху этого окна мы увидим строку поиска, в которой напишем имя нашего помощника. После успешного поиска нам предложат два Эмита, нам нужно выбрать второй. Нажимаем на кнопку Установить и подождем. Нажимаем Закрыть в 2-х окнах, и в навигационном меню появится вкладка «Эмит». Это означает, что наше расширение успешно установлено.
Теперь давайте посмотрим нашего помощника в деле. Нам всего лишь нужно набрать один восклицательный знак и нажать на клавишу Tab. Как видите, всего в два движения мы сделали скелет нашей HTML страницы.
Заголовочные теги
Вернемся к заголовочным тегам. Их существует шесть разновидностей. Один вы уже видели в деле. Остальные теги именуются следующим образом. H2, H3, H4, H5 и H6. Все они имеют разницу в уровне важности. H1 среди всех заголовочных тегов самый важный. Это обозначается большим размером шрифта.Соответственно, H6 среди всех имеет самую низкую важность и обозначается самым маленьким шрифтом среди всех заголовочных тегов. Сходство между всеми заголовочными тегами выражается в отступах блока и жирности шрифта.
Познакомимся с тегом, который будет служить нам параграфом. Он именуется буквой p. Данный тег обозначает зону для тегов со своими отступами. И в отличие от заголовочного тега имеет обычный шрифт, а не жирный. Сотрем все теги, кроме H1 и создадим тег p. Напишем в нем фразу «самый первый параграф».
Сохраним файл и проверим нашу страницу в браузере. Кстати, если не закрывать страничку, запущенную с помощью молнии, то после сохранения можно увидеть внесенные изменения, не перезагружая страницу в браузере.
Атрибуты
Нашими элементами можно манипулировать с помощью атрибутов. Атрибут пишется в открывающемся теге. После названия тега мы ставим пробел и пишем название атрибута.
Ставим знак «равно», дальше пишем двойные кавычки, в которых пишем значение. Проведем исследование. Переместим заголовочный тег H1 на середину нашей страницы.
Для этого нам необходимо перейти в открывающийся тег H1, отступить пробел, написать название нашего атрибута. В нашем случае это атрибут под названием align. После него ставим равно. Не забываем двойные кавычки. (8:03) Пишем центр. (8:05) И обязательно следим, чтобы кавычки были закрыты. Сохраняем документ и переходим в браузер. (8:12) Как видим, результат есть.
Изменение фона страницы
Так как мы убедились, что атрибут align работает, проверим еще один элемент под названием style. Из названия можно понять, что данный атрибут меняет стиль. Тут нужно немного объяснения. С помощью данного атрибута можно менять не только стиль блока, но также содержание самого блока. Проведем еще одно исследование: изменим фон нашей страницы.
Перейдем в TechBuddy, отступим пробел и напишем атрибут style. Ставим знак равно. Внутри кавычек нужно написать свойство, которое нужно изменить. Изменим свойство фона, а это значит, что мы напишем background-color, который меняет у фона только цвет. После того, как мы установили Emmet, нам стало легче писать код, так как это специальное расширение делает за нас некоторую работу. Например, отступая от Buddy, выпадающий окна Emmet нам подсказывает, какие атрибуты он знает. Напишем букву S, и на второй строчке мы увидим style, нажмем на него и будем приятно удивлены. Эммет за нас поставил знак равно и кавычки, но это еще не все. Внутри кавычек напишем букву B, и здесь он нам помогает. На шестой строчке выбираем background-color. Можно заметить, что за нас он поставил двоеточие. Но и это не все. Если нажать Ctrl пробел, то появится список цветов, которые он знает. Выберем aqua. Также, нужно не забывать ставить точку с запятой после того, как мы выбрали значение у любого свойства стайла. Сохраним и посмотрим на результат.
Все получилось. Мы изменили только фон, но также можем поменять цвет букв. После точки с запятой в атрибуте style напишем новое свойство. Мы также будем пользоваться нашим помощником. На этот раз наше свойство будет называться color, значением которого будет назначен любой цвет на ваш вкус. Общий цвет мы ставим в теге body, но можно сделать и индивидуальный цвет для каждого блока. Давайте так и сделаем. Поставим разные цвета для каждого блока и посмотрим, что получится. Действительно, это работает.
Если вы хотите сами сделать проект и набраться первого опыта программистом, то записывайтесь к нам на курс по созданию сайтов на языках разметки HTML и CSS, а также JavaScript для школьников от 12 лет. Благодаря ему, вы научитесь создавать страницы и продумывать архитектуру сайта, разрабатывать интуитивно понятную навигацию для пользователей, грамотно структурировать и подавать контент, верстать сайты с нуля. Результатом обучения станет опубликованные в сети ваш индивидуальный веб-ресурс, который станет первым пунктом в портфолио работ по программированию.
Создание сайтов для детей: чем полезно обучение?
Создание сайта – это не только про красивую картинку, которую видят пользователи. Это также про продуманность, структуру, творчество. Вот что развивают дети, занимаясь на курсах по веб-дизайну:
1. Структурное мышление. HTML и CSS отвечают за разметку и стили. Чтобы создать сайт, ребенку нужно научиться мыслить алгоритмами и продумать блоки станицы, главные и второстепенные элементы сайта, связь между элементами страницы. Навык аналитически мыслить пригодится в обучении и профессиональной деятельности.
2. Визуальный результат приложенных усилий. Обучение на курсе по созданию сайтов дает детям возможность работать и сразу видеть изменения: фона, цвета и шрифтов.
3. Креативность. Разработка сайта соединяет творчество и логику. Мир на экране создается с помощью цветов и типографики, но подчиняется определенным законам, когда сочетание перечисленного должно быть понятно пользователю.
4. Внимательность. В коде важна каждая мелочь, и ребенок учится быть перепроверять себя и не бояться ошибок. Отладка воспитывает усидчивость и терпение и учит воспринимать ошибку как шаг к результату.
Ребенок перестает быть просто потребителем контента, а становится активным создателем цифрового пространства, понимает, как устроены сайты, на которых он проводит время. А это первый шаг к осознанному использованию технологий и стремлению создавать веб-ресурсы, которые приносят пользу и визуальное удовольствие.
Как родителям поощрять увлечение ребенка созданием сайтов?
Кроме решения технических вопросов, можно поддержать интересы ребенка следующим образом:
1. Проявляйте искренний интерес к тому, что он делает. Лучший способ это показать – стать для ребенка «заказчиком» и попросить его разработать небольшой лендинг для вашего хобби, придумать дизайн афиши для предстоящего семейного торжества или создать оригинальную открытку для именинника. Это превращает учебную задачу в реальный проект с понятной целью.
2. Хвалить за конкретные решения и отмечать, как удачно ребенок подобрал цветовую гамму, насколько удобно он расположил иконки или какой интересный шрифт выбрал для заголовков. Конкретная похвала помогает ребенку осознавать свои сильные стороны.
3. Помогать находить вдохновляющие примеры. Можно обращать внимание ребенка на удачные решения в окружающем цифровом мире, показывать сайты с красивым и удобным интерфейсом. Это поможет учиться анализировать чужой опыт и брать из него идеи.
4. Расширять кругозор за пределами компьютера. Вдохновение для работы часто рождается в реальной жизни, если вместе посещать тематические мероприятия: дни открытых дверей в IT-компаниях, мастер-классы для начинающих программистов, выставки современного искусства или графического дизайна. Это позволит ребенку погрузиться в профессиональную среду и увидеть, как много интересного происходит в мире программирования и творчества.
5. Создать домашнюю библиотеку с книгами по программированию, а также типографике. Они не только дают системные знания, но и служат источником вдохновения, которое всегда под рукой.
6. Помогать формировать портфолио. Учебные проекты можно систематизировать, чтобы потом легче было найти и представить. Их наличие дает ощущение серьезности и прогресса.
7. Участвовать в конкурсах. Даже участие без победы дисциплинирует и дает ценный опыт работы над задачей с четкими сроками и требованиями. А если ребенок получит награду или хотя бы опубликует свою работу, то это станет стимулом двигаться дальше.
Когда ребенок видит, что может создать нужную и красивую вещь для реальных людей, получает одобрение от значимых взрослых и наблюдает яркие примеры перед глазами, его желание учиться и развиваться возрастает. Он начинает понимать, что с помощью разработки сайтов можно создавать действительно полезные и нужные вещи.
Как навыки, полученные на курсах по разработке сайтов, пригодятся детям в будущем?
На обучении по веб-дизайну индивидуально или в группе формируются определенные навыки и качества характера. Hard и soft skills будут полезными, даже если ребенок не станет профессиональным веб-разработчиком, потому что:
- Это фундамент для многих IT-профессий. Понимание основ дизайна и верстки пригодится в любой IT-профессии от тестировщика до проджект-менеджера, помогая лучше понимать задачи и говорить с разработчиками на одном языке.
- Универсальный навык для смежных специальностей, когда нужно представить себя или свой проект в интернете. Также знания пригодятся для привлечения внимания к своим увлечениям в соцсетях и школьных проектов.
- Инструмент для развития личного бренда. Разработка сайтов, как и веб-дизайн учит детей осознанно управлять образом, который они создают, чтобы оставленный цифровой след был профессиональным и сохраняющим репутацию.
- Способ организовать заработок на фрилансе. Полученные навыки позволят ребенку монетизировать свое творчество и технические знания, работая над реальными проектами из любой точки мира.
Обучение разработке сайтов дает ребенку разнообразный и интересный опыт, который пригодится во многих жизненных сферах, даст ощущение свободы выбора и возможности создавать качественный и профессиональный цифровой мир.
Вопросы и ответы
Стоит ли советовать курсы по разработке сайтов девочке? Программирование больше считается все-таки мужской сферой.
Среди программистов достаточно высокий процент девушек, так как эта профессия требует и технических знаний и одновременно эмпатии (понимания пользователя) и внимания к деталям. Девочкам часто очень нравится возможность создавать практичные проекты, воплощая в коде созданные стильные макеты. Это отличный способ совместить аналитический склад ума и возможность проявить творческие наклонности с востребованной профессией.
Какой язык учить первым, если ребенок хочет пройти обучение по созданию сайтов?
HTML отвечает за структуру сайта, а CSS работает с его стилями и внешним видом). Это база, с которой нужно начинать любой путь в программировании. Они дают быстрый и понятный результат, что очень важно для поддержания мотивации новичка.
Ребенок и так много времени за компьютером. Как сделать занятия безопасными?
Хорошие школы решают вопрос с помощью продуманной структуры занятий с обязательными перерывами, правильной организацией рабочего места, организации учебного процесса со сменой деятельности (написание кода, обсуждение, презентация). Родители могут продолжать придерживаться этих правил, когда ребенок занимается дома.
Как выбрать курс по обучению детей разработке сайтов?
При выборе курса стоит обратить внимание на учебную программу и наличие итогового проекта; личность учителя; формат занятий. Многие онлайн-школы программирования предлагают пройти бесплатные вводные уроки, чтобы определить интересность к направлению, подходит ли темп занятий и выбранный формат, насколько понятны объяснения педагога.
Как понять, что у ребенка есть способности и интерес к разработке сайтов и это не только временное увлечение?
Есть несколько признаков, на которые можно обратить внимание: это аналитический склад ума (ребенок любит структурировать и разбираться в устройстве вещей), внимательность к деталям (замечает мелочи, интересуется самим устройством предметов в целом и веб-ресурсов в частности и предлагает, как можно их улучшить). Можно попробовать бесплатные уроки на YouTube, чтобы посмотреть , как ребенок реагирует на объяснения, интересно ли ему идти дальше.
В каком возрасте лучше всего знакомится с языками разметки в программировании?
Ученики средних классов в среднем с 12 лет могут изучать HTML и CSS, потому что уже способны работать с текстом и абстрактными понятиями. Подростки могут осваивать не только верстку, но и программирование на JavaScript, чтобы делать сайты интерактивными.
Вам может быть интересно
Веб-дизайн для детей: ресурсы для обучения и курсы
Веб-дизайн для детей: перспективы направления
JavaScript для детей и подростков: со скольки лет можно изучать?