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

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

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

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

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

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

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

Читайте также
Комментарии


shevchenko
shevchenko

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

ivashkevich
ivashkevich

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

ignateva7
ignateva7

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

ivashkevich
ivashkevich

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

en
en

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

ivashkevich
ivashkevich

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

adianon
adianon

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

ivashkevich
ivashkevich

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

adianon
adianon

Спасибо

albert.s
albert.s

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

Vlad
Vlad

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

ivashkevich
ivashkevich

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

smartkomp
smartkomp

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

ivashkevich
ivashkevich

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

smartkomp
smartkomp

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

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
smartkomp

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

ivashkevich
ivashkevich

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

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

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

Lungren
Lungren

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

ivashkevich
ivashkevich

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