Мир пронизан ИТ-технологиями, нейросетями и сайтами, на которых люди находят информацию о чем угодно. Чтобы школьники легко пользовались сайтом, на нем должна быть правильно настроена разметка HTML. Для детей, которые хотят узнать больше о работе HTML, CSS и других параметров сайта, созданы бесплатные видеоматериалы школы «Пиксель», где ребята в привычном для себя темпе знакомятся с подробностями. Сегодня вы узнаете о том, как правильно работать со стилями CSS и разметкой HTML.
Содержание
- Что такое HTML?
- Программирование HTML для детей: устанавливаем программу для создания сайтов Brackets
- HTML курс по программированию: создаем первую страницу сайта
- Обучение HTML для детей: устанавливаем расширение
Что такое HTML?
Программирование HTML для детей может показаться сложной задачей, если не знать, с чем имеешь дело. В действительности, всё проще.
HTML – это язык гипертекстовой разметки, который интерпретируется браузерами, в подавляющем большинстве, одинаково. Стоит отметить, что каждый из них может объяснять гипертекст по-своему.
Любой документ на языке HTML представляет собой набор элементов. Начало и конец каждого элемента обозначаются специальными пометками, которые именуются тегами Они соответственно «открывают» и «закрывают» свой элемент.
Есть и другие технологии, которые используются отдельно или вместе с языком гипертекстовой разметки. Например, чтобы описать внешний вид страницы, используются стили, которые называются CSS. Поэтому для создания сайтов и игр для детей, HTML, CSS нужно использовать как скелет, который будет держать всю визуальную конструкцию.
Зная особенности работы гипертекстовой разметки, дети могут сделать любую веб-страницу – от простого портфолио до многостраничного портала. В этом уроке школы «Пиксель» вы узнаете, как создать собственную страницу с личным дизайном и даже опубликовать ее в интернете.
Программирование HTML для детей: устанавливаем программу для создания сайтов Brackets
Для начала работы нужно установить текстовый редактор для веб-разработчиков Brackets, который ориентирован на HTML, CSS и Javascript. Скачать последнюю версию можно на официальном сайте бесплатно.
Для этого перейдите на страницу и нажмите кнопку «Скачать» или «Download Brackets». Ждите, пока скачается.
Файл сохранится в указанную папку, чаще всего это папка «Загрузки». Запустите установку, кликнув два раза. После окончания его работы для удобства можно перенести ярлык установленной программы на рабочий стол. Для этого зайдите в «Пуск» найдите программу в списке, нажмите на нее правой кнопкой мыши и выберите «Дополнительно», а далее «Перейти к расположению файла».
Теперь нажмите на установленный файл правой кнопкой мыши — «Отправить» — «Рабочий стол (создать ярлык)» или перетащите так, нажав левую кнопку мыши.
Теперь, чтобы сделать следующий шаг в нашем HTML курсе по программированию для детей, запустите этот ярлык.
HTML курс по программированию: создаем первую страницу сайта
После запуска программы Brackets перед вами появится большая область.
Основные действия с кодом будут происходить на светлом фоне, где расположено окно редактора Code. Слева на темном фоне будут находиться файлы и папка проекта.
Сперва папки с проектом не будет, ее необходимо создать. Для этого нажмите в верхнем левом углу программы «Файл» и потом «Открыть директорию».
Кликните и появится папка с названием «Выбрать директорию». В ней необходимо перейти на рабочий стол.
В браузере выберите вкладку с рабочим столом и создайте здесь папку с названием проекта.
Для удобства можно назвать её «Project» или по -другому. Откройте эту папку и в окне предпросмотра нажмите кнопку «Выбор папки».
Теперь директория «Project» нашего бесплатного курса по HTML готова к работе.
Кликайте правой кнопкой мыши в темной зоне, выберете «Новая директория» и назовите ее Lesson1.
После чего снова кликайте на нее же правой кнопкой и выберете «Новый файл» и дайте ему название index.html. Указываете расширение HTML, так как будете прописывать в файле именно этот код.
Ниже можно прописать следующий код самостоятельно или скопировать его из текста:
<html>
<head>
<title>Моя первая страница!</title>
</head>
<body>
<h1> Привет, Мир! </h1>
</body>
</html>
Обратите внимание, что текст пишется построчно.
Давайте разберемся, что значит каждый из элементов, который прописан в нашем уроке по веб-разработке для детей.
<html> – это главный тег, внутри которого содержатся все элементы страницы.
<head> – это так называемая голова или заголовок страницы, который можно увидеть во вкладке загруженной страницы. Чтобы это сработало, внутрь еще нужно прописать тег <title>.
<body> – это текст, который будет выводиться на самой страницы, то есть тело страницы, основная информация, то, чем вы хотите поделиться с миром.
<h1> – это специальный тег, который дает понять браузеру, что текст должен отображаться самым крупным из возможных шрифтов.
Чтобы не потерять данные по проекту, обязательно сохраняйте его. Это можно сделать, нажав комбинацию клавиш «Ctrl+S» или мышкой выбрать в верхнем левом углу «Файл» — «Сохранить».
Далее нам нужно посмотреть результат выполненной работы. Для этого в правом углу ищем значок молнии и нажимаем на нее.
Если все сделано верно, то должно открыться окно, похожее на окно браузера, у которого вверху во вкладке будет написано «Моя первая страница», а на белом пустом поле «Привет, Мир!».
Все эти знания можно использовать для создания интерактивных заданий и игр для детей, HTML, CSS в этом случае будут просто помогать создавать подобные проекты.
HTML для детей: устанавливаем расширение
Теперь попробуем ускорить работу. Удалите весь написанный текст, чтобы окно было пустым.
Наше расширение «спрятано» практически там же, где и предпросмотр созданной страницы. В правом углу под значком молнии как раз и будет находиться нужный для нас элемент. Визуально он напоминает аккумулятор.
Нажмите на него. После этого действия появится еще одно окно, в котором будут подгружаться дополнительные элементы.
В верхнем правом углу этого окна будет размещена строка поиска, на нее нужно нажать. Впишите в строку слово Emmet — это простое и полезное расширение, позволяющее изучать программирование HTML для детей еще быстрее с помощью аббревиатур, которые можно развернуть в полноценные теги.
Нажмите на кнопку «Установить» напротив названия расширения и подождите. Установка расширения занимает не более минуты. Если установка затягивается, проверьте ваше интернет-соединение.
По завершении установки выйдет уведомление, в котором отобразится информация о том, что расширение доступно для использования — закройте его.
Теперь в навигационном меню (верхняя строка с надписями) найдите вкладку Emmet — она должна быть последней. Если ее нет, повторите процедуру установки.
Теперь нужно посмотреть расширение для веб-разработки в деле. Чтобы проверить, введите в строку восклицательный знак нажатием клавиши Shift и единицы. После чего нажмите клавишу Tab.
В итоге у вас должна получится конструкция из 10 строк, которая выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Как видите, зная определенные комбинации, можно за секунду создавать небольшие скелеты HTML страницы.
Обучение HTML для детей: заголовочные теги
Теперь узнаете с помощью нашего курса по программированию HTML работают заголовки.
Между тегами <body> и </body> теперь необходимо вписать следующее:
<h1>Первый уровень</h1>
<h2>Второй уровень</h2>
<h3>Третий уровень</h3>
<h4>Четвертый уровень</h4>
<h5>Пятый уровень</h5>
<h6>Шестой уровень</h6>
Уточним, что для поисковых систем эти теги тоже имеют значение.
Соответственно, для поиска первый уровень всегда будет стоять с большим приоритетом, чем третий или пятый.
Чтобы посмотреть визуально как в нашем курсе по HTML выглядит все, что было написано в редакторе, нужно нажать значок молнии.
Если все прописано правильно, то текст будет уменьшаться в размерах с первого до шестого. Сходство между всеми заголовочными тегами выражается в отступах блока и жирностью шрифта.
Теперь узнаете, как работает тег параграфа. Он будет аккуратно отделять написанный текст. Чтобы его использовать, нужно прописать тег <p>. Он обозначает зону для текста со своими отступами. Имеет обычный шрифт, а не жирный в отличие от заголовочных тегов.
Предлагаем оставить такой текст:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Первый уровень</h1>
<p>Самый первый параграф</p>
</body>
</html>
Чтобы посмотреть изменения, нажмите на значок молнии или просто обновите страницу в браузере, в которой ранее был отображен текст с заголовками.
Но что делать, если хотите поместить написанный текст в середину страницы? Для этого необязательно долго погружаться в веб-разработку. Достаточно знать специальные атрибуты, чтобы в будущем изучать HTML, CSS, игры для детей гораздо быстрее.
Пропишите специальный атрибут для самого большого заголовка как в примере:
<h1 align=”center”>Первый уровень</h1>
Остальные параметры можно оставить такими же. Это нужно сделать, чтобы визуально отслеживать изменения. Посмотрите, как текст отображается на странице браузера — он должен быть в центре.
Если это не так, повторите последние пункты нашего урока по программированию HTML для детей.
Теперь попробуем ещё один элемент под названием style. Для этого в тег <body> нужно прописать определенные значения, в итоге строка должна выглядеть так: <body style=”background-color: aqua;”>
Обратите внимание, что при выборе стиля расширение Emmet автоматически прописывает кавычки, экономя тем самым нам несколько секунд работы. Потенциально это поможет сократить минуты, часы и даже дни в изучении HTML для детей.
Вы можете просто скопировать эту строку или самостоятельно ее написать, используя возможности расширения Emmet. Например, после того, как было написано слово body, нажмите английскую букву s, — расширение сразу же покажет список параметров, которые можно использовать далее. В нашем случае это style. Также, после знака = и открывающихся кавычек можно нажать букву b и в шестой строчке появится строка, с помощью которой можно выбрать цвет фона.
После выбора цвета обязательно поставьте точку с запятой.
Теперь сохраните проект бесплатного HTML курса по программированию для детей любым удобным способом, о котором мы писали ранее. После чего нажмите на значок молнии и перейдите во вкладку с браузером. Ваша страница должна быть окрашена теперь в выбранный цвет.
Если этот цвет вам не нравится, попробуйте выбрать другой. Для этого нужно вместо aqua прописать red, green, yellow, blue или любой другой цвет.
В качестве игры CSS, HTML для детей можно представить еще и как площадку для экспериментов. Например, можно поменять не только фон, но и цвет букв. Это очень удобная функция, которая позволит максимально точно настроить внешний вид сайта, особенно на начальном этапе изучения этого направления.
Чтобы изменить цвет букв, нужно изменить строчку и оставить ее в таком виде: <body style=”background-color: aqua; color: blanchedalmond;”>
Таким образом, текст который был написан в теге <h1>, будет отображен серым цветом. Цвет можно выбрать любой. Попробуйте нажимать любые буквы английского алфавита после слова color, чтобы подобрать самый подходящий для себя цвет.
Как менять цвет не всего текста, а только отдельного предложения? Для этого нам нужно настроить атрибут в строке с самым большим шрифтом. Пропишите в строке такие значения:
<h1 style=”background-color: bisque; color: coral;>Первый уровень</h1>
<p style=”background-color: darkviolet; color: deepskyblue;>Самый первый параграф</p>
Теперь снова сохраните проект и перейдите на вкладку браузера с текстом.
На странице должен быть отображен общий фон, а строчки иметь собственный фон, который будет выглядеть как полоса другого цвета. К тому же текст тоже должен быть свой у каждой надписи.
Если вы не видите результата, то попробуйте повторить процесс с самого начала, чтобы избежать ошибок.
Изучить тему использования стилей CSS и языка гипертекстовой разметки HTML для веб-разработки можно на курсе школы «Пиксель» по ссылке. Преподаватели объяснят на доступных примерах, как создавать свои сайты быстро и интересно.