21.02.2017   8028
Как создать HTML-страницу

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

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

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

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

код html-странички в стандартном "блокноте":

тот же самый код в редакторе Notepad++:

Подсветка помогает выделить теги, так намного удобнее работать.

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

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

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

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

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

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

Если есть вопросы - задавайте в комментариях, не стесняйтесь - здесь все новички. Я положительно отношусь к людям, которые чего-то не поняли и не боятся спросить. Отвечу всем с радостью.

КОММЕНТАРИИ

 shevchenko 2017-05-26 14:15:57
0

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

Ответить
 ignateva7 2017-05-26 14:44:51
0

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

Ответить
  •  ivashkevich 2017-05-26 20:19:23
    0

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

    Ответить
 en 2017-05-26 15:03:15
0

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

Ответить
  •  ivashkevich 2017-05-26 20:15:22
    0

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

    Ответить
 adianon 2017-05-26 15:35:44
+1

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

Ответить
 albert.s 2017-05-27 13:10:39
0

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

Ответить
 Vlad 2017-08-19 22:42:11
+1

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

Ответить
  •  ivashkevich 2017-08-20 06:01:32
    0

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

    Ответить
 smartkomp 2017-09-18 20:26:54
0

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

Ответить
  •  ivashkevich 2017-09-19 11:16:45
    0

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

    Ответить
 smartkomp 2017-09-19 22:40:16
0

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

Ответить
 smartkomp 2017-09-19 23:07:24
+1

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

Ответить
 smartkomp 2017-09-29 23:59:26
0

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

Ответить
  •  ivashkevich 2017-09-30 07:26:06
    0

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

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности