Чат PHP-разработчиков
Как создать HTML-страницу

Создаём свою первую HTML-страницу

Всем привет, друзья! Рад представить вам новый онлайн курс по HTML. Если Вы ещё не знаете, для чего нужно изучать HTML, читайте тут.

А в этом вводном уроке мы с вами создадим свою первую HTML-страничку. Поехали.

Для более удобного создания страничек Вам потребуется редактор с подсветкой кода. Я рекомендую Вам на начальном этапе использовать программу Notepad++. Скачать можно тут.

Итак, выбрали редактор. Давайте теперь создадим нашу первую страничку.

Создайте папку site, а внутри неё файл index.html.

Теперь давайте откроем его в нашем редакторе Notepad++, и зададим кодировку файла в UTF-8:

Теперь просто скопируйте следующий код в редактор (если вы сейчас не понимаете, что здесь написано - ничего страшного, мы разберём это через пару уроков):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок новости - Название сайта</title>
    </head>
    <body>
    <h1>Заголовок новости</h1>
        Текст новости
    </body>
</html>

Сохраните файл и откройте его в браузере. Для этого достаточно кликнуть по получившемуся файлу два раза левой кнопкой мыши.

Поздравляю, Вы только что создали свою первую страничку!

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • Установите Notepad++
  • Создайте страничку по данному уроку
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (28)


shevchenko

Огромное спасибо за интересную статью, у меня получилось! Это так просто, как оказалось.

ivashkevich

На здоровье =)

ignateva7

Я всегда думала, что это очень сложно - создавать HTML страницы. Но тут все подробно и понятно описано, надеюсь, с такой инструкцией все получится.

ivashkevich

Если что-то не будет получаться, или будут замечания - напишите, пожалуйста. Будем делать ещё лучше. Спасибо за отзыв!

en

Время есть - теперь буду разбираться. Спасибо за курс, надеюсь что с вашей помощью у меня всё получится!

ivashkevich

Пожалуйста! Если будут вопросы - спрашивайте, с радостью помогу.

adianon

Простые и сжатые шаги обучения HTML - лучше всего, меня заинтересовал Notepad++, он есть в среде Линукс и если нет, есть ли аналоги?

ivashkevich

Прямо его нет, но есть клон - notepadqq, использую под убунтой.

adianon

Спасибо

albert.s

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

Vlad

Артём привет! Во-первых, большое спасибо за возможность обучаться. У меня есть реальная цель, научиться вебу и затем зарабатывать на этом.
Теперь вопрос.. когда выполнял домашнее задание и скопировал код в Notepad++ .. код не проявился в разных цветах... и потом, в браузере не было никакого результата... Что делать?

ivashkevich

Добрый день!
Возможно, вы назвали файл не index.html и из-за этого Notepad++ не распознал, что это HTML-файл. Включите показ расширений вот по этой инструкции - http://remontka.pro/file-extensions/
Если проблема не в этом, можете написать мне в ВК. И удачи Вам в ваших начинаниях =)

smartkomp

Нужно ли обратить внимание на разрядность Notepad++ при скачивании программы?

ivashkevich

Она должна соответствовать разрядности вашего процессора и операционной системы. Как и с любыми другими программами.

smartkomp

Премного благодарен. Все получилось, установить, копировать код, для тренировки еще писал в ручную. Получается нормально, в браузере отображается. Ушел на второй урок.

smartkomp

Кому интересно, есть видео обзоры Notepad++:
https://www.youtube.com/watch?v=PuTOOrRYTZA
https://www.youtube.com/watch?v=Y-2dXT4s6aM
https://www.youtube.com/watch?v=ryd449IOUeM
Смотрите полностью, потому, что есть настройки и плагины которые нужно устанавливать в ручную. Здесь в комментах кто-то писал,что не отображается подсветка кода, так вот там об этом говорят.

smartkomp

Эту кодировку <meta charset="utf-8"> нужно прописывать в каждом новом документе как и <!DOCTYPE html>? Благодарю.

ivashkevich

Да, всё что внутри <head> должно присутствовать на каждой странице.

Airnike9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок новости - Название сайта</title>
    </head>
    <body>
    <h1>Заголовок новости</h1>
        Текст новости
    </body>
</html>
ivashkevich

Удачи в прохождении)

Lungren

Артём, почему у вас не видно уроков CSS?

ivashkevich

Весь курс рассчитан на backend-разработчиков, поэтому CSS особо не требуется. Он будет немного затронут в ходе курса HTML, ровно настолько, насколько это может понадобиться бекендеру.

Margo

Артем, я всё делаю пошагово, как Вы говорите, но при создании файла index.html она не меняется и остается в виде текстового редактора, почему так?

Margo

т.е. файл даже в браузере открывается не страничкой, а обычным текстовым редактором, со всеми кодами, не могу понять почему ((
и еще вопрос, разве не нужно в папке site создавать папку www, а только потом в ней сохранять index.html ?

ivashkevich

Можете сделать и так. По поводу расширения - у вас в конце имени файла .txt добавляется, скорее всего. Тогда вам сюда.

Margo

Артём, все сделала, изменила, но все равно не открывает в браузере так,как надо. Показывает одни вопросы, что делать? =((

ivashkevich

Значит кодировку нужно у файла поменять. Посмотрите видео к этому уроку и сделайте всё по нему.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований