1. Первые шаги: Что такое HTML, структура документа и твоя первая страница
Первые шаги: Что такое HTML, структура документа и твоя первая страница
Привет! Если ты читаешь эту статью, значит, ты решил стать настоящим создателем, а не просто пользователем интернета. Представь, что интернет — это огромный город, а веб-сайты — это дома в этом городе. До сих пор ты просто ходил в гости, но сегодня мы наденем каску архитектора и заложим первый кирпичик твоего собственного дома.
Тебе 12 лет, и это идеальный возраст для старта. Многие создатели Google, Facebook или VK начинали именно с того, что ты узнаешь прямо сейчас. Мы не будем учить скучную теорию годами. Мы сразу перейдем к делу.
Что такое HTML и почему это не совсем программирование?
Ты наверняка слышал слово HTML. Но что это? Это аббревиатура от английского HyperText Markup Language — «язык гипертекстовой разметки».
Звучит сложно? Давай упростим.
Представь, что ты пишешь письмо другу. Ты хочешь выделить важное слово жирным, сделать заголовок покрупнее, а в конце вставить картинку. В Word ты просто нажимаешь кнопки. Но браузер (программа, через которую ты сидишь в интернете, например, Chrome или Safari) не понимает нажатия кнопок. Ему нужны инструкции.
HTML — это и есть набор инструкций для браузера. Ты говоришь ему: «Эй, браузер! Вот это — заголовок, а вот это — картинка, а здесь будет ссылка».
> Важно понимать: HTML — это не язык программирования, где нужно решать математические задачи или писать сложные алгоритмы. Это язык разметки. Мы просто «размечаем» текст, указывая, чем является каждая его часть.
!Как разметка превращает обычный текст в веб-страницу
Главный инструмент: Теги
В языке HTML мы общаемся с браузером с помощью специальных команд, которые называются теги.
Тег — это слово, заключенное в угловые скобки: < и >.
Большинство тегов работают как коробочки или контейнеры. У них есть начало (открывающий тег) и конец (закрывающий тег). Всё, что ты положишь внутрь этой «коробочки», будет подчиняться правилам тега.
Выглядит это так:
Обрати внимание на закрывающий тег: он выглядит так же, как открывающий, но перед названием стоит косая черта / (слэш). Это как крышка от коробки. Если ты не закроешь тег, браузер может запутаться, и твой сайт «рассыплется».
Примеры:
<b>Привет</b> — сделает текст жирным (от слова bold*).
<i>Мир</i> — сделает текст курсивным (от слова italic*).
Анатомия веб-страницы: Скелет документа
Любой сайт, будь то простая страничка или огромный YouTube, имеет одинаковую базовую структуру. Это как скелет у человека. У всех людей есть череп, позвоночник и ребра, независимо от того, как они выглядят снаружи.
Давай разберем обязательные части любой HTML-страницы.
!Сравнение структуры HTML-документа с телом человека
Вот как выглядит минимальный код любой страницы:
Давай разберем каждую строчку, чтобы ты понимал, что происходит.
1. <!DOCTYPE html>
Это паспорт документа. Эта строчка всегда идет самой первой. Она говорит браузеру: «Я — современный HTML5 документ, обращайся со мной правильно». Если её не написать, браузер может включить «режим совместимости со старьем» и отобразить сайт криво.2. <html> ... </html>
Это самый главный контейнер. Он начинается сразу после DOCTYPE и заканчивается в самом конце файла. Всё, что есть на твоем сайте, должно находиться внутри этих тегов. Это как стены твоего дома.3. <head> ... </head>
Это «голова» сайта. В ней хранится техническая информация, которая не видна пользователю на самой странице. Здесь мы подключаем шрифты, указываем кодировку (чтобы русские буквы не превратились в кракозябры) и пишем название вкладки.Внутри head мы видим тег <title>. Текст внутри него («Моя первая страница») появится на вкладке твоего браузера, там, где ты обычно видишь значок сайта.
4. <body> ... </body>
Это «тело» сайта. Самая интересная часть! Всё, что ты напишешь здесь — текст, картинки, видео, кнопки — будет видно посетителю сайта. Это то, что мы называем «контентом».Твоя первая практика: Создаем сайт за 5 минут
Хватит теории! Давай создадим твою первую веб-страницу прямо сейчас. Тебе не нужно скачивать сложные программы. Всё необходимое уже есть на твоем компьютере.
Шаг 1: Подготовка рабочего места
Создай на рабочем столе новую папку. Назови еёMyFirstSite. Порядок — это важно. Веб-мастера всегда держат файлы в папках.Шаг 2: Создание файла
Нам нужен простой текстовый редактор. * Если у тебя Windows: Открой программу «Блокнот» (Notepad). * Если у тебя Mac: Открой TextEdit (но в настройках обязательно выбери режим «Простой текст» / Plain Text, это важно!).Шаг 3: Написание кода
Скопируй этот код и вставь его в свой редактор. Лучше напечатай его вручную — так пальцы запомнят команды быстрее.Заметил что-то новое? Я добавил строчку <meta charset="utf-8">. Это заклинание нужно, чтобы браузер понимал русский язык и не выдавал странные символы.
Также я использовал теги <h1> и <p>:
* <h1> (Heading 1) — это заголовок первого уровня, самый большой и важный.
* <p> (Paragraph) — это обычный абзац текста.
Шаг 4: Сохранение (Самый важный момент!)
Теперь нужно сохранить файл. Но не как обычный текстовый документ.index.html..html, а не .txt. Если сохранишь как index.html.txt, ничего не сработает.MyFirstSite.> Почему index? В мире веб-разработки файл с именем index.html считается главной страницей сайта. Когда ты заходишь на любой сайт, сервер автоматически ищет этот файл.
Шаг 5: Запуск
Зайди в папкуMyFirstSite. Ты увидишь файл со значком твоего браузера (Chrome, Edge, Firefox). Дважды кликни по нему.Поздравляю! Твой браузер открылся, и ты видишь свой заголовок и текст. Ты только что создал веб-страницу. Ты официально веб-мастер начального уровня!
Экспериментируй!
Не закрывай браузер и текстовый редактор. Попробуй изменить текст внутри тегов <h1> или <p> в Блокноте, сохрани файл (Ctrl+S), а затем вернись в браузер и нажми кнопку «Обновить» (F5). Ты увидишь, как текст на странице поменяется.
Попробуй добавить еще один абзац <p> или сделать часть текста жирным с помощью <b>. Не бойся сломать — это твой черновик. Если что-то пойдет не так, просто сотри и напиши заново.
В следующей статье мы разберем, как добавлять на страницу изображения и ссылки, чтобы превратить скучный текст в настоящий мультимедийный портал. Готовься, будет интересно!