21.02.2017   6143

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

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

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

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

При вёрстке веб-страниц используются язык разметки HTML и язык стилей CSS. В этом курсе мы поговорим в основном о первом, однако затронем и второй.

У нас тут видео с этим уроком для ленивых (ну или если что-то не будет получаться, всегда можно подсмотреть там).

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

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

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

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

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

Всегда используйте именно кодировку UTF-8 для своих страничек. Чуть подробнее о кодировке я расскажу в следующих уроках.

Теперь давайте запишем следующий код в этот файл:

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

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

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

О том, как это работает я поведаю в следующих уроках. Не забудьте подписаться в социальных сетях, чтобы не пропустить новые уроки. И обязательно сделайте домашнее задание к этому первому уроку. Вообще, делайте его во всех уроках, где оно указано. Только практика даст реальный результат. А я желаю Вам удачи в прохождении этого курса, если будут вопросы - задавайте в комментариях, не стесняйтесь - здесь все новички. И лично я положительно отношусь к людям, которые чего-то не поняли и не боятся спросить. Отвечу всем с радостью. До встречи в следующих уроках!

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


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

Следующий урок

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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